18 советов по css, которые сделают жизнь разработчика проще

Применяя условно

Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the utility at only medium screen sizes and above.

To learn more, check out the documentation on Responsive Design, Dark Mode and .

Переопределение высоты линии по умолчанию

Важно отметить, что по умолчанию каждая утилита Tailwind font-size устанавливает собственную высоту строки по умолчанию. Это означает, что каждый раз, когда вы используете адаптивную утилиту размера шрифта, такую как , любая явная высота строки, которую вы установили для меньшей контрольной точки, будет отменена

Если вы хотите переопределить высоту строки по умолчанию после установки размера шрифта, зависящего от контрольной точки, не забудьте также установить высоту строки, зависящую от контрольной точки:

Использование одинаковой высоты строки для разных размеров шрифта, как правило, не дает хороших типографских результатов. Высота строки обычно должна уменьшаться по мере увеличения размера шрифта, поэтому поведение по умолчанию здесь обычно экономит вам массу работы. Если вы обнаружите, что боретесь с этим, вы всегда можете , чтобы не включать высоту строк по умолчанию.

Выравнивание текста

Частая причина появления большого интервала между словами – выравнивание текста по ширине. При таком выравнивании слова равномерно распределяются по всей длине строки за счет увеличения расстояния между ними.

Чтобы это изменить, необходимо сделать следующее:

Выделить необходимый участок текста с помощью мыши или выделить весь текст с помощью сочетания «Ctrl+A».
Нажимаем сочетание клавиш «Ctrl+A» для выделения текста
На панели управления перейти во вкладку «Главная», далее – в раздел «Абзац».
Переходим во вкладку «Главная», затем в раздел «Абзац»
Нажать на левую кнопку «Выравнивание по левому краю» или сочетание клавиш «Ctrl+L».
Нажимаем на левую кнопку «Выравнивание по левому краю» или сочетание клавиш «Ctrl+L»

Если же в требованиях по оформлению текста указано, что необходимо выравнивание по ширине, то самый простой способ уменьшить пробелы — поставить автоматические переносы слов.

Для этого нужно:

Перейти во вкладку «Разметка страницы».
Переходим во вкладку «Разметка страницы»
Далее – «Параметры страницы».
Переходим в раздел «Параметры страницы»
Далее – «Расстановка переносов».
Нажимаем на пункт «Расстановка переносов»
После выбрать режим «Авто».
Выбираем режим «Авто»

Если оба способа не дали результат, то проблема заключалась не в выравнивании текста. Возможно, дело в лишних пробелах.

Как изменить расстояние между словами CSS?

Для этого мы можем использовать аналогичное свойство, которое называется word-spacing. Работает оно точно так же как и предыдущее с единственным отличием в том, что расстояние устанавливается для целых слов.

word-spacing может принимать такой же набор значений:

Числовое значение – размер интервала может быть задан в пикселях, дюймах, пунктах и относительных единицах
normal – значение по умолчанию
inherit – наследование родительских параметров

Для тех же трех блоков задам расстояние между словами в css-файле:

CSS

.row15 .first p, .row15 .second p, .row15 .third p{
letter-spacing:0.2em;
word-spacing:1em;
}

1
2
3
4

.row15 .first p, .row15 .second p, .row15 .third p{

letter-spacing0.2em;

word-spacing1em;

}

Вот что у меня получилось:

Используя данные свойства можно придать тексту дополнительный объем, но главное, конечно же, не перестараться. Так как слишком большие расстояние между словами или символами обязательно скажется на внешнем виде и читаемости текста. В любом случае нужно подбирать интервалы в зависимости от ситуации и используемого шрифта.

Удачи вам в оформлении страниц сайта! До встречи в следующих статьях!

С уважением Юлия Гусарь

Относительное позиционирование

Относительное позиционирование — странная штука. Если судить по картинке выше, то оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: бокс продолжает занимать место в потоке. Действительно, именно для позиционирования боксов этот метод используется редко. Хотя изредка и бывают ситуации, когда надо ради визуальных эффектов пододвинуть один бокс под другой.

Чаще же всего используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок, тот самый, относительно которого будут позиционироваться боксы внутри него.

Вот пример, который показывает полезность этого свойства. Пусть у нас есть три блока: «заголовок», «содержимое» и «низ», а внутри «содержимого» лежит блок «об авторе»:

И пусть высота заголовка нам точно не известна. Боксы эти статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним.

А теперь нам хочется внутри содержимого блочок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.

Напишем ему:

Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный. Следующая мысль — сделать блок содержимого тоже абсолютным, тогда он станет содержащим блоком. Но тогда он сам выдернется из потока и низ прижмется прямо к заголовку.

Вот это и есть случай, в котором работает . Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и «об авторе» расположится в его правом верхнем углу.

Начнем с разговора о font-size

Рассмотрим этот простой HTML-код с тегом p, содержащим три элемента span, каждый из которых со своим font-family:

Ba Ba Ba p { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }

При использовании одного и того же font-size в разных гарнитурах высота получается различной:

Даже если нам известно об этой особенности, почему font-size: 100px не создает элементы высотой 100px? Я измерил эти значения: Helvetica — 115px, Gruppo — 97px и Catamaran — 164px.

Хотя на первый взгляд это выглядит несколько странно, все вполне ожидаемо — причина в самом шрифте. Как это работает:

Шрифт задает свой em-квадрат (em-square) (он же UPM, units per em — единиц на кегельную площадку) — своего рода площадку, в рамках которой будет рисоваться каждый символ. В этом квадрате для измерения используются относительные единицы, и, как правило, для него принимаются размеры 1000 единиц. Хотя также бывает 1024, 2048 или иное количество единиц.
В зависимости от количества относительных единиц задаются метрики шрифтов, такие как высота верхних и нижних выносных элементов (ascender/descender), прописных и строчных букв. Некоторые значения могут выходить за рамки em-квадрата.
В браузере относительные единицы масштабируются до необходимого font-size.

Возьмем шрифт Catamaran и откроем его в FontForge для получения метрик:

em-квадрат принят за 1000 единиц;
высота верхних выносных элементов составляет 1100 единиц, а нижних — 540.

После нескольких проверок выяснилось, что браузеры на Mac OS используют значения HHead Ascent/Descent, а на Windows — Win Ascent/Descent (эти значения могут различаться). Помимо этого, высота прописных букв Capital Height составляет 680 единиц, а строчных X height — 485.

Таким образом, шрифт Catamaran использует 1100 + 540 единиц в em-квадрате, состоящем из 1000 единиц, и поэтому при размере font-size: 100px получается высота 164px. Данная вычисленная высота определяет область содержимого (content-area) элемента (этот термин будет использоваться далее по тексту). Можете считать область содержимого областью, к которой применяется свойство background.

Можно также предположить, что высота прописных букв составляет 68px (680 единиц), а строчных (x-высота) — 49px (485 единиц). В результате 1ex = 49px и 1em = 100px, а не 164px (к счастью, em зависит от font-size, а не от вычисленной высоты).

Прежде чем нырнуть глубже, рассмотрим основные моменты, с которыми придется столкнуться. Элемент p при отображении на экране может состоять из нескольких строк с соответствующей шириной. Каждая строка состоит из одного или нескольких строчных элементов (inline elements)(HTML-тегов или анонимных строчных элементов для текстового содержимого) и называется контейнером строки (line-box). Высота контейнера строки зависит от высот его дочерних элементов. То есть браузер вычисляет высоту каждого строчного элемента, а по ней — высоту контейнера строки (от самой верхней до самой нижней точки ее дочерних элементов). В результате высоты контейнера строки всегда достаточно, чтобы вместить все его дочерние элементы (по умолчанию).

При изменении приведенного выше HTML-кода следующим образом:

Good design will be better. Ba Ba Ba We get to make a consequence.

будет сгенерировано три контейнера строки:

в первом и последнем будет по одному анонимному строчному элементу (текстовое содержимое);
во втором будет два анонимных строчных элемента и 3 элемента span.

Отчетливо видно, что второй контейнер строки больше остальных по высоте из-за вычисленной области содержимого его дочерних элементов, точнее того, который использует шрифт Catamaran.

Сложным моментом в создании контейнера строки является то, что мы, по сути, не можем ни увидеть, ни управлять им через CSS. Даже применение фона к ::first-line не помогает отобразить высоту первого контейнера строки.

Свертывание границ таблиц

Существуют две разные модели для установки границ ячеек таблицы в CSS: раздельная (separate) и свернутая (collapse).

В раздельной модели границ, которая используется по умолчанию, каждая ячейка таблицы имеет свои собственные отдельные границы, тогда как в модели со свернутыми границами смежных ячеек таблицы имеют общую границу. Вы можете установить модель границы для HTML-таблицы, используя CSS-свойство .

Следующие правила сворачивают границы ячеек таблицы и применяют черную границу в один пиксель.

Вы также можете удалить пространство между границами ячеек таблицы, установив для CSS-свойства значение . Однако это только удаляет пространство, но не объединяет границы, как при установке для свойства значения .

Visible

Если вы не настроили свойство переполнения, по умолчанию будет . Таким образом, в общем случае нет причин явно устанавливать это значение, если только вы не отменяете его более раннюю установку в другом месте.

На примере ниже выводится , в котором находится текст. У этого div указана высота и сделана синяя рамка, чтобы были видны границы. И хорошо видно, что хотя сам блок заканчивается нижней рамкой, текст идет ниже и выходит за его пределы. Все потому, что по умолчанию видимость при переполнении установлена в – видима.

See the Pen
overflow visible by Андрей (@adlibi)
on CodePen.

Еще интересный момент в том, что даже если контент виден за пределами блока, это вылезающее содержимое не влияет на поток страницы. Например, под блоком с синей рамкой выведен блок с красной рамкой и прозрачным красным фоном. Видно, что текст за пределами первого контейнера не мешает второму контейнеру и тот примыкает вплотную к первому.

See the Pen
overflow flow by Андрей (@adlibi)
on CodePen.

Говоря в целом: не стоит без особой причины устанавливать фиксированную высоту элементов.

Начнем с разговора о font-size

причина в самом шрифте

Шрифт задает свой em-квадрат (em-square) (он же UPM, units per em — единиц на кегельную площадку) — своего рода площадку, в рамках которой будет рисоваться каждый символ. В этом квадрате для измерения используются относительные единицы, и, как правило, для него принимаются размеры 1000 единиц. Хотя также бывает 1024, 2048 или иное количество единиц.
В зависимости от количества относительных единиц задаются метрики шрифтов, такие как высота верхних и нижних выносных элементов (ascender/descender), прописных и строчных букв. Некоторые значения могут выходить за рамки em-квадрата.
В браузере относительные единицы масштабируются до необходимого .

FontForge

em-квадрат принят за 1000 единиц;
высота верхних выносных элементов составляет 1100 единиц, а нижних — 540.

область содержимого (content-area) элементаВысота контейнера строки зависит от высот его дочерних элементов

в первом и последнем будет по одному анонимному строчному элементу (текстовое содержимое);
во втором будет два анонимных строчных элемента и 3 элемента .

Сложным моментом в создании контейнера строки является то, что мы, по сути, не можем ни увидеть, ни управлять им через CSS

CLS — показатель визуальной стабильности сайта

Сдвиг макета происходит каждый раз, когда видимый элемент изменяет свое положение от одного визуализируемого кадра к другому.

Визуальная стабильность сайта количественно измеряется показателем Cumulative Layout Shift. CLS — это совокупный сдвиг макета. Показатель входит в перечень трех главных метрик оценки пользовательского опыта — Core Web Vitals.

CLS помогает оценить, как часто пользователи сталкиваются с неожиданными сдвигами. Он измеряет общую сумму всех индивидуальных оценок сдвига макета для каждого неожиданного сдвига, который происходит в течение всего срока службы страницы.

Сайты должны стремиться к тому, чтобы CLS не превышал значение 0,1. Хороший показатель, если не меньше 75% сессий, сегментированных по мобильным и настольным устройствам, не превышают это значение.

Шкала CLS

Размер шрифта

Предыдущие методы основывались на изменении кода HTML, что не всегда возможно или удобно. Стили позволяют решить нашу проблему, не затрагивая HTML. Одним из способов является изменение шрифта до 0. Для всего списка ul свойство font-size устанавливаем нулевым, а для пунктов списка восстанавливаем до значения 1rem (пример 2). Получается, что пробел станет символом со шрифтом нулевого размера и перестанет отображаться.

Пример 2. Использование font-size

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Горизонтальный список</title>
<style>
ul.hr {
/* Обнуляем значение отступов и полей */
margin: 0; padding: 0;
font-size: 0;
}
ul.hr li {
display: inline-block; /* Строчно-блочный элемент */
padding: 4px; /* Поля вокруг текста */
background: #0075b2; /* Цвет фона */
color: #fff; /* Цвет текста */
font-size: 1rem; /* Размер текста */
}
</style>
</head>
<body>
<ul class=»hr»>
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>

Затем установите меру, известную как max-width

Когда вы устанавливаете свой текст в относительных единицах, например, rem, вы можете предположить, что один rem примерно равен по ширине двум символам. Это означает, что вы можете установить max-width от 30 до 40 rem. Решите, исходя из того с каким значением лучше смотрится правое поле при выравнивании текста по левому краю. В каких вариантах большинство слов умещается в одну строку, и вы добьетесь того ровного типографического цвета, который мы ищем?

Этот пример немного сложен. Несмотря на то, что у верхнего фрагмента текста меньше всего шагов в правом поле, нижний пример может быть более практичным. Это потому, что строки короче

Конечно, все зависит от языка, на котором написан ваш текст. В английском языке слова короче, чем в немецком, поэтому может быть полезно использовать немного более длинный интервал. Всегда избегайте lorem ipsum в своих дизайнах. Если есть возможность, используйте в дизайне фактический текст. Если нет, используйте черновик или хотя бы фиктивный текст на языке контента.

p {
max-width: 64ch;
}

Я не использую этот прием, потому что установил остальные интервалы в rem и хотел бы их придерживаться. Но точно есть случаи, когда этот подход вам пригодится!

CSS для таблиц

Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:

table { border: 2px solid #124480; }

1	table{border2pxsolid#124480; }

Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.

Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:

td,
th { border: 1px solid #185eb2;
padding: 10px; }

1
2
3

td,

th{border1pxsolid#185eb2;

padding10px;}

Да, и если у вас есть теги <th>, про них тоже не стоит забывать.

Что получилось:
В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:

Свойство border-spacing

table {
border: 2px solid #124480;
border-spacing: 10px;
}

1
2
3
4

table{

border2pxsolid#124480;

border-spacing10px;

}

Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:

Поэтому значительно чаще для таблиц используют свойство со значением . В этом случае пустое пространство между ячейками «сплющивается», мы получаем привычный вид таблицы, а свойство с любым значением просто игнорируется.

Свойство border-collapse

table {
border: 2px solid #124480;
border-collapse: collapse;
}

1
2
3
4

table{

border2pxsolid#124480;

border-collapsecollapse;

}

Если хочется получить таблицу с разделителями между строк, стоит задать такое правило:

Разделители для строк

tr { border: 1px solid #3f7ec9; }

1	tr{border1pxsolid#3f7ec9; }

Если необходимо «раскрасить» строки через одну, необходимо использовать следующие селекторы и свойства:

/* Для четных строк */
tr:nth-child(even){ background-color: #cde; }
/* Для нечетных строк */
tr:nth-child(odd){ background-color: #d3f5f4; }

1
2
3
4

/* Для четных строк */

trnth-child(even){background-color#cde; }

/* Для нечетных строк */

trnth-child(odd){background-color#d3f5f4; }

В последнем примере, чтобы расположить 2 таблицы рядом, для тега было использовано свойство:

table { display: inline-table }

1	table{displayinline-table}

В этом случае таблицы ведут себя аналогично элементам с .

Естественно, вы можете вместо использовать свойство :

tr:nth-child(even) {
background-image: url(img/diagonal-noise.png);
}
tr:nth-child(odd) {
background-image: url(img/tetr.gif);
}

1
2
3
4
5
6

trnth-child(even){

background-imageurl(imgdiagonal-noise.png);

}

trnth-child(odd){

background-imageurl(imgtetr.gif);

}

Для разнообразного управления ячейками таблицы можно использовать селекторы псевдоклассов типа или :

table {
border: 2px solid #124480;
border-collapse: collapse;
width: 500px;
}
td:first-child{
text-align: right;
}
td:last-child{
width: 30%;
text-align: right;
}
td:last-child:after{
content: ‘ грн.’;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

table{

border2pxsolid#124480;

border-collapsecollapse;

width500px;

}

tdfirst-child{

text-alignright;

}

tdlast-child{

width30%;

text-alignright;

}

tdlast-childafter{

content’ грн.’;

}

Так, с помощью правил выше мы задали width для , а также выравнивание текста по правому краю для первой и последней колонки. А с помощью псевдоэлемента для последней колонки добавили еще единицу для цены — ‘грн’. В результате получилась такая таблица:

О том, как создавать сложные таблицы, читайте в статье Объединение ячеек и строк в таблице.

CSS списки

Списки HTML бывают двух типов — упорядоченные (нумерованные) и неупорядоченные (без нумерации). CSS позволяет изменять символы, цифры или буквы, которые используются для маркировки отдельных элементов списка. Вы даже можете установить свои изображения, в качестве символа списка.

Упорядоченные списки

none — без символа
disc — заполненный круг
circle — круг незаполненный
square — квадрат
decimal — числа арабскими цифрами: 1, 2, 3…
decimal-leading-zero — как decimal, но с дополнительным нулем для цифр от 1 до 9, например. 01, 02, 03
lower-latin — маленькие буквы латинского алфавита: a, b, c, d, e…
lower-greek — маленькие греческие буквы: α, β, γ, δ …
lower-roman — числа римскими цифрами, маленькие: i, ii, iii, iv, v…
upper-latin — заглавные буквы латинского алфавита: A, B, C, D, E…
upper-roman — числа латинскими цифрами, заглавные: I, II, III, IV, V…

Позиционирование списка

Положение списка может управляться свойством list-style-position. Возможные значения:

outside — значение по умолчанию
inside — будет задан дополнительный отступ для списка

Использование собственного изображения

Вместо нескольких символов, которые предлагают вам браузеры, вы можете использовать собственное изображение для маркировки списка элементов. Это делается следующим образом:

На месте kartinka.gif поставить название файла, который вы будете использовать.

При такой настройке, изображение может отображаться в несколько ином положении, в зависимости от используемого браузера. Чтобы достичь одинаковый стиль, независимый от браузера, которым пользуются посетители на страницах вашего сайта, вы должны указать фоновое изображение для списка в целом, а для отдельных его элементов:

Список по умолчанию не указывает изображение (list-style-type:none), а свойства padding и margin со значением 0, чтобы не было никаких различий в результатах между браузерами.

Для отдельных элементов списка (li) указывается изображение, которое, конечно, не должно повторяться (background-repeat: no-repeat). С помощью свойства background-position вы можете точно позиционировать изображение, а padding-left требуется для перемещения текста вправо, в противном случае произойдет наложение текста и изображения.

Укороченный стиль для списков

Стили для списков могут быть заданы и с укороченной форме:

Значения в list-style разделяются только интервалом и задаются в таком порядке: type, position, image.

Далее: CSS уроки, 4 часть: блочная модель, рамки, границы, отступы

Post Views:
2 338

Подведем итоги

Рабочие примеры:

JSBin
gist

Что мы выяснили:

Строчный (inline) контекст форматирования действительно сложен для понимания.
У всех строчных элементов есть две высоты:
- высота области содержимого (которая зависит от метрик шрифта);
- высота виртуальной области (line-height);
- ни одну из них совершенно точно нельзя визуализировать (разве что вы занимаетесь инструментальными средствами разработки и решили исправить этот недочет, — тогда было бы просто чудесно).
line-height: normal зависит от метрик шрифта.
из-за line-height: n виртуальная область может стать меньше области содержимого.
на vertical-align особо полагаться не стоит.
высота контейнера строки вычисляется при помощи свойств line-height и vertical-align его дочерних элементов.
Мы не можем просто получить или задать метрики шрифта через CSS.

Но я все равно люблю CSS

​Применяя условно

Наведение, фокус и другие состояния

Контрольные точки и медиа-запросы

Переопределение высоты линии по умолчанию

Выравнивание текста

Как изменить расстояние между словами CSS?

Относительное позиционирование

Начнем с разговора о font-size

Свертывание границ таблиц

Visible

Начнем с разговора о font-size

CLS — показатель визуальной стабильности сайта

Размер шрифта

Затем установите меру, известную как max-width

CSS для таблиц

CSS списки

Упорядоченные списки

Позиционирование списка

Использование собственного изображения

Укороченный стиль для списков

Подведем итоги

Применяя условно