- PVSM.RU - https://www.pvsm.ru -
Пока одни новые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие многим кажутся недостойными внимания и мало освещаются в интернете. Взять хотя бы свойства, отвечающие за типографику. Многие из них работают уже давно, но известны немногим. А зря, ведь они тоже могут быть весьма полезными и эффектными. Давайте же исправим эту несправедливость и осветим то, что обычно остается в тени.
С переносом строк в CSS всегда было что-то не так. Сначала у нас было свойство word-wrap, которое вроде бы работает, но числится как черновое и не рекомендуется к использованию. Затем появилось word-break, которое расставляет переносы отталкиваясь исключительно от того, помещаются ли слова в контейнер, да еще не помечает их никакими знаками. И лишь теперь, спустя столько лет, CSS-переносы готовы встать с колен: теперь у нас появилась возможность переносить слова по правилам языка. Все благодаря свойству hyphens:
article {
hyphens: auto;
}
Возможные значения:
Важный нюанс: чтобы словарь переносов заработал, в теге <html> необходимо указать атрибут lang с кодом языка:
<html lang="ru">
Также этот атрибут можно задать непосредственно в абзаце текста:
<p lang="en">Some long text</p>
Работает [1] это везде, кроме настольных Chrome и Opera. В них все будет выглядеть как обычно, но в остальных браузерах мы получим нормальные переносы, так что можете смело пользоваться (конечно, если вам в принципе нужны переносы в тексте).
Капитель — это начертание в гарнитуре, при котором строчные знаки выглядят как уменьшенные заглавные. В CSS его можно задать с помощью свойства font-variant, отвечающего за представление строчных букв. Возможные значения:
h1 {
font-variant: small-caps;
}
Выглядит это весьма интересно:
Поддерживается [2] font-variant пока что только в Firefox и Safari, поэтому использовать его как основную фишку дизайна не стоит.
Поиграться с другим текстом или шрифтом можно здесь:
О свойствах text-decoration-style и text-decoration-color я уже писал [3]. Но существует еще одно: text-decoration-skip. Оно включает пропуск выносных элементов в подчеркиваемом тексте, что выглядит довольно-таки эффектно.
Свойство может принимать несколько значений, но более-менее работают только:
a {
text-decoration-skip: ink;
}
Работает [4] в Chrome, Opera и Safary (причем, Safari на маке по-умолчанию использует text-decoration-skip: ink).
А вы знали, что в CSS можно задать формат всех кавычек, использующихся на сайте? Для этого есть специальное свойство quotes. Оно применится к содержимому тега <q>, а также к псевдоэлементам со свойством content равным open-quote или close-quote.
q {
quotes: "«" "»";
}
q {
quotes: "“" "”";
}
q {
quotes: "022" "022";
}
Свойство давно поддерживается всеми браузерами.
Свойства orphans и widows можно назвать аутсайдерами. Вот, например, что об одном из них написано [5] в документации Mozilla:
Свойство widows CSS определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на paged носителе. В типографике, «висячая» строка (widow) это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства widows позволяет предотвратить висячие строки.
На нестраничных носителях, таких как screen, CSS свойство widows не имеет эффекта.
Выглядит как что-то бесполезное для 99.9% разработчиков. Скажите, как часто вам приходилось им пользоваться? Если такое случалось хотя бы один раз, пожалуйста, напишите об этом в комментариях.
Но это не все, на что способны эти свойства! Почему-то мало где описано, что они работают и для многоколоночных макетов!
article {
columns: 2;
orphans: 10; /* минимальное число строк для всех столбцов, кроме последнего */
}
article {
columns: 2;
widows: 5; /* минимальное число строк для последнего столбца */
}
Сразу возникает вопрос: «а что если для блока указать оба свойства? Не начнут ли они конфликтовать?». В таких случаях widows имеет приоритет и учитывается в первую очередь.
В контексте стилизации страниц свойства давно работают [6] везде, кроме, почему-то, Firefox-а. Также, применительно к стилизации колонок они не работают еще и в IE/Edge.
Автор: Павел
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/web-razrabotka/267045
Ссылки в тексте:
[1] Работает: https://caniuse.com/#search=hyphenate
[2] Поддерживается: https://caniuse.com/#search=font-variant
[3] писал: https://habrahabr.ru/company/wargaming/blog/251441/
[4] Работает: https://caniuse.com/#search=text-decoration-skip
[5] написано: https://developer.mozilla.org/ru/docs/Web/CSS/widows
[6] работают: https://caniuse.com/#search=orphans
[7] Источник: https://habrahabr.ru/post/277933/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.