Свежая фича CSS - @scope
Всем привет! Относительно недавно в css появилась такая интересная штуковина как
И так о чем это:
Думаю все мы понимаем как работает синтаксис ниже
Теперь для того что бы задать стили элементам внутри
Вот такая вот довольно полезная в будущем штука. Если хотите узнать больше подробностей то вот ссылка на MDN
Всем привет! Относительно недавно в css появилась такая интересная штуковина как
@scope. В целом штука в перспективе интересная и думаю вам полезно будет о ней знать, но на данный момент лучше ее не использовать по причине слабой поддержки в браузерахИ так о чем это:
Думаю все мы понимаем как работает синтаксис ниже
.element a { width: 100px;}.element .big_block { height: 200px;}Теперь для того что бы задать стили элементам внутри
.element не нужно каждый раз прописывать вложенность. Мы можем сделать так:@scope(.element) { a {width: 200px;} .big_block {height: 100px;}}Вот такая вот довольно полезная в будущем штука. Если хотите узнать больше подробностей то вот ссылка на MDN
CSS text-wrap: balance
Начиная с Chrome 114, вы можете использовать сбалансированный перенос текста для заголовков с помощью свойства
👉 Уровень поддержки согласно caniuse
Для балансировки текста браузер выполняет эффективный бинарный поиск наименьшей ширины, которая не вызывает переноса строки, останавливаясь на одном пикселе CSS (не экранном пикселе). Для дальнейшей оптимизации бинарного поиска браузер начинает с 80% средней ширины строки.
👉 Смотреть демо
👉 Более подробная статья
Начиная с Chrome 114, вы можете использовать сбалансированный перенос текста для заголовков с помощью свойства
text-wrap со значением balance.👉 Уровень поддержки согласно caniuse
Для балансировки текста браузер выполняет эффективный бинарный поиск наименьшей ширины, которая не вызывает переноса строки, останавливаясь на одном пикселе CSS (не экранном пикселе). Для дальнейшей оптимизации бинарного поиска браузер начинает с 80% средней ширины строки.
👉 Смотреть демо
👉 Более подробная статья
Запоминайте меньше и достигайте большего с помощью логических свойств
Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.
Поддержка браузерами:
👉 padding-inline: caniuse
👉 margin-block: caniuse
👉 inset-inline: caniuse
Как всегда удачи в экспериментах!
Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.
button { padding-inline: 2ch; padding-block: 1ch;}article > p { text-align: start; margin-block: 2ch;}.something::before { inset-inline: auto 0;}Поддержка браузерами:
👉 padding-inline: caniuse
👉 margin-block: caniuse
👉 inset-inline: caniuse
Как всегда удачи в экспериментах!
👿HTML: плохие стороны
В этой статье автор расскажет о некоторых проблемах HTML с точки зрения accessibility и usability, таких как использование атрибута multiple элемента select, недостатки элементов <i> и <datalist>, проблемы с кнопками disabled, а также несогласованность в работе нативного проигрывателя видео.
Читать...
В этой статье автор расскажет о некоторых проблемах HTML с точки зрения accessibility и usability, таких как использование атрибута multiple элемента select, недостатки элементов <i> и <datalist>, проблемы с кнопками disabled, а также несогласованность в работе нативного проигрывателя видео.
Читать...