- ПРАВИЛО ВЕРТИКАЛЬНЫХ ОТСТУПОВ: вертикальные margin не суммируются, а схлопываются в пользу наибольшего значения.
- clearfix препятствует схлопыванию родителя по высоте, когда детям присвоено
float:left. - НЕ ИСПОЛЬЗУЙТЕ КАВЫЧКИ с функцией url(), кроме случая, когда ссылка содержит пробел, либо формируется программно (обычно при использовании inline-стилей).
- Избегайте использования модификатора приоритета
!important. - Сортируйте свойства по принципу: свойства, сильно влияющие на элемент - в начале, а незначительно - в конце.
- Display
- Позиционирование (position, float)
- Боксовая модель (width, height, margin, padding, border, box-sizing)
- Цвета и типографика
- Остальное
Адаптивная верстка - это подход к созданию веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах и динамически подстраивающийся под заданные размеры окна браузера.
Основные принципы:
-
Использование гибкого макета на основе сетки (grid-based layout)
-
Использование гибких изображений
-
Работа с медиа запросами
-
Подход к проектированию "Mobile first"
-
Grid-based layout - коллекция стилей, основанных на классах, которые позволяют контролировать макет страницы, используя систеллу строк и колонок.
-
Flexible images - это подход к заданию размеров изображения, которые изменяются в зависимости от просматриваемого устройства.
-
Media queries - это инструмент для реализации различного поведения веб-страницы в зависимости от просматриваемого устройства.
-
Mobile first - это подход к проектированию дизайна веб-страницы; проектирование должно начинается с адаптивной версии веб-сайта для мобильных устройств.
Нам необходимо сообщить браузеру, что наша страница предназначена для отображения на мобильных устройствах. Для этого используется тег :
<meta name="viewport" content="width=device-width">Значения атрибута content:
| Атрибут | Значение | Что делает |
|---|---|---|
| width | device-width or numbers | Определяет ширину viewport |
| height | device-height or numbers | Определяет высоту viewport |
| initial-scale | 0.1 -> 1.0 | Определяет начальный масштаб страницы |
| user-scalable | no / yes | Может ли пользователь изменять масштаб в окне |
| minimum-scale | 0.1 -> 10 | Определяет минимальный масштаб viewport |
| maximum-scale | 0.1 -> 10 | Определяет максимальный масштаб viewport |
Символы перед = - это комбинаторы значений.
a[target] # все ссылки с атрибутом target
a[target="_blank"] # имеющие атрибут target со значением "_blank" (он специфичнее, чем просто target)
a[title~="внешняя"] # title содержит пробел и начинается со слова "внешняя"
a[class|="social"] # имя класса содержит дефис и начинается со слова "social"
a[title^="social"] # title начинается с указанного слова (не важно, какие символы следуют после)
a[title$="icon"] # title заканчивается на "icon" (не важно, какие символы предшествуют)
a[title*="ic"] # title содержит заданное сочетание символов .home header p,
.home footer p,
.home aside p {
color: #f00;
}С селектором :matches() вы можете значительно сократить его, найдя сходство в селекторах; в нашем примере у нас везде в начале стоит .home, а конце - р, так что мы можем использовать :matches() для того чтобы собрать все элементы между ними. Непонятно? Это выглядит вот так:
.home :matches(header,footer,aside) p {
color: #f00;
}Быстрая загрузка веб-страниц всегда была важна - но сейчас, с появлением на рынке широкого спектра мобильных устройств (с каждым из которых понятие «скорость соединения» становится всё более изменчивым и неопределенным) это, пожалуй, особенно важно. Один из способов ускорить загрузку страницы - сократить размер внешних подгружаемых файлов, и поэтому новое свойство внутри @font-face, которое позволяет делать именно это - весьма полезное добавление.
Свойство, о котором идет речь - unicode-range, и в качестве значения оно принимает набор ссылок на юникод-символы. При загрузке внешних ресурсов из файла шрифта будут загружаться только эти символы, а не все символы, присутствующие в шрифте. Приведенный код показывает, как загрузить только три символа из файла foo.ttf:
@font-face {
font-family: foo;
src: url('foo.ttf');
unicode-range: U+31-33;
}Особенно это полезно в том случае, если вы используете иконки внутри шрифта и хотите показывать на конкретной странице не все из них, а только конкретные. В одном тесте, который я провел, использование Unicode-range сократило общее время загрузки файла шрифта в среднем на 0,85 секунды - а это вполне существенно. Конечно, у вас могут получиться и другие цифры.
Q: Не могу никак понять зачем нужен sourcemap, в частности - gulp-sourcemap. Чем это помогает в верстке?
A1: Вот представь, собрал ты 10 файлов в 1 бандл, потом минифицировал, а как дебажить эту лапшу? На помощь приходит sourcemaps, который будет показывать реальную структуру файлов и.т.д
A2: Можно было бы быть более конкретным, например сказав, что в проектах обычно лежат минимифицированные файлы кода, вносить изменения в которые крайне затруднительно. Для этого создаются карты кода, занимающие каким-то образом очень мало места. И при необходимости внесения изменений в код, текстовым редактором или рабочей средой открываются именно карты кода, внутри которых каким то образом сохранена структура кода до его минимификации. В картах вносятся изменения, сохраняются и они, например, автоматически вносятся в оригинал файла. Или не вносятся автоматически, а просто дают возможность браузеру показывать в режиме разработчика структуру. Или еще как то. Статья на хабре очень водянистая. А после данного ответа остается загадка, а что же такое карты.. это файлы? Через них идет работа? Как они связаны с рабочим уменьшенным файлом? Они всегда лежат рядом с рабочими файлами? Если будет ответ по моему шаблону, это будет полный, замечательный ответ.
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
zoom: 1; /* For IE 6/7 (trigger haslayout) */
}
#box form {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* центрирование */
margin: auto;
/* центрирование */
height: 120px;
width: 300px;
border: 1px solid black;
padding: 5px 5px 5px 55px;
background: url(https://js.cx/clipart/key.png) 3px 5px white no-repeat;
}@font-face {
font-family: 'Liberation Sans';
src: url('/assets/fonts/liberationsans-regular.eot');
src: url('/assets/fonts/liberationsans-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/liberationsans-regular.woff2') format('woff2'),
url('/assets/fonts/liberationsans-regular.woff') format('woff');
src: url('/assets/fonts/liberationsans-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "WebFont";
src: local("WebFont"),
url(WebFont.eot?) format("eot"),
url(WebFont.woff) format("woff"),
url(WebFont.ttf) format("truetype");
font-weight: bold;
font-style: italic;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap; src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3gTD_vx3rCubqg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap; src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3g3D_vx3rCubqg.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "___";
src: url(../fonts/___.eot);
src: url(../fonts/___.eot?#iefix) format("embedded-opentype"),
url(../fonts/___.woff) format("woff"),
url(../fonts/___.ttf) format("truetype"),
url(../fonts/___.svg#___) format("svg");
font-weight: normal;
font-style: normal
}input::-webkit-input-placeholder {color: #adadad; opacity:1;}
input::-moz-placeholder {color: #adadad; opacity:1;}
input:-moz-placeholder {color: #adadad; opacity:1;}
input:-ms-input-placeholder {color: #adadad; opacity:1;}:root {
--spacer: 10px;
--large-title: 24px;
}
@media (min-width: 600px) {
:root {
--spacer: 30px;
--large-title: 32px;
}
}
.module {
padding: var(--spacer);
color: #fff;
background-color: #333;
}
.title {
font-size: var(--large-title);
}
/**
* CSS-переменные не нужно объявлять заранее, они динамические. Это полезно в различных случаях.
* Их можно изменять по условию из любого места и в определённых контекстах, к примеру в медиавыражениях.
*
* Отдавая стили медиавыражений сразу же, можно уменьшить количество медиавыражений для отзывчивого оформления, разбросанных по всему проекту.
* Это также дает по-настоящему изящный и чистый способ видеть общие стили отступов и типографики независимо от формата.
*/Равномерное выравнивание блоков по ширине. Работает для Firefox 8, Opera 11.51, IE6-9, Safari 5.1, Chrome.
<style>
ul {
text-align: justify;
/* Обнуляем для родителя*/
line-height: 0;
font-size: 1px; /* 1px для Opera */
/* Лекарство для IE6-7*/
text-justify: newspaper;
zoom:1;
/* Включаем в работу последнюю строку*/
text-align-last: justify;
}
ul:after {
width: 100%;
height: 0px;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}
ul li {
width: 98px;
height: 98px;
display: inline-block;
text-align: left;
/* Востанавливаем у потомков, кроме последнего*/
line-height: normal;
font-size: 14px;
/* Без него в Opera будет отступ под элементами */
vertical-align: top;
/* эмуляция inline-block для IE6-7*/
//display : inline;
//zoom : 1;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
--
Источник: http://css-live.ru/Primer/viravnivanie-items/pseudo-element.htmlКак вставить iframe c YouTube, чтобы он пропорционально масштабировался при ресайзе страницы?
"Тут предлагают высоту в % задать. Попробуем. Видите, не работает: ему неотчего высоту отсчитывать. Т.е. высота в % применяется, только если у родителя жестко задана высота в px. Тогда у ребенка сработает высота в %".
"Кто знает, от какого значения будет расчитываться padding-top? От какого значения берем %? Прикол в том, что заданная в % высота элемента рассчитывается из пиксельной высоты родителя, а заданный в % padding рассчитывается из ШИРИНЫ РОДИТЕЛЯ"
ВЫВОД: «Заданный в % padding ребенка расчитывается из ширины родителя».
HTML
<div class="relation">
<div class="relation__ratio"></div>
<iframe class="relation__content" src="" allowfullscreen></iframe>
</div>CSS
.relation {
position: relative;
max-width: 600px;
}
.relation__ratio {
padding-top: 56.25%;
height: 0; /* лишняя подстраховка */
}
.relation__content {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border: 0;
}Хорошая идея намножить классы типа ratio_16x9, ratio_1x1 и т.д., и присваивать фреймам в зависимости от начальных пропорций видео.
.ratio-1x1 { padding-top: 100% }
.ratio-4x3 { padding-top: 75% }
.ratio-16x9 { padding-top: 56.25% }@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700');
@import 'desktop.css';
@import 'tablet.css' only screen and (max-width: 1000px);
@import 'mobile.css' only screen and (max-width: 767px);
@import 'd-style.css';<link rel="stylesheet" href="/bitrix/templates/steel/css/response_1129.css" media="(max-width: 1129px)">
<link rel="stylesheet" href="/bitrix/templates/steel/css/response_1023.css" media="(max-width: 1023px)">
<link rel="stylesheet" href="/bitrix/templates/steel/css/response_767.css" media="(max-width: 767px)">
<link rel="stylesheet" href="/bitrix/templates/steel/css/response_479.css" media="(max-width: 479px)">.modal-body::-webkit-scrollbar {
width: 0px;
background: transparent;
}Источник: https://qna.habr.com/q/18012
<div class="lazy-wrap">
<a href="/img3/ntv/VD3A2602.jpg" data-fancybox="gallery-2">
<img class="lazy" data-src="/img3/ntv/min/VD3A2602.min.jpg">
</a>
</div>
<style>
.lazy-wrap a {
display: block;
background-image: url(data:image/gif;base64,R0lGODlhCgAIAIABAN3d3f///yH5BAEAAAEALAAAAAAKAAgAAAINjAOnyJv2oJOrVXrzKQA7);
}
.lazy-wrap .lazy{
min-height: 390px;
}
@media (max-width: 520px) {
.lazy-wrap .lazy {
min-height: unset;
}
}
</style>