Полеты по миру фронтенда, том 9

Мир фронтенда снова растет быстрее, чем население Земли. За всеми новостями и тенденциями в нем становится почти так же трудно уследить, как за подростком на скейтборде. Но не волнуйтесь, мы собрали для вас все последние новости из мира фронтенд-разработки в довольно сжатом виде.

Сегодня мы рассмотрим вложенность CSS, отображение свойств перехода и другие приемы. Вот краткое изложение основных моментов наших последних встреч по фронтенду. Так что усаживайтесь поудобнее, включайте свой творческий мозг и приготовьтесь к "Полету сквозь мир фронтенда", том 9!

Вложенность CSS, или вложенность в CSS без препроцессора

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

Более ранний код:

Теперь мы можем написать это следующим образом:

Текущая поддержка

Обзор инструментов искусственного интеллекта

Используете ли вы искусственный интеллект в своей работе? Сейчас он повсюду, и это не ускользнуло от нас. Использование искусственного интеллекта, безусловно, имеет как свои преимущества, так и свои подводные камни. Именно поэтому я беру на себя смелость переработать статью @free-thinker, в которой он дает обзор полезных инструментов ИИ. Если вам интересна эта тема, рекомендую включить статью в свой список для чтения .

Анимация высоты: 0 до высоты: auto с помощью сетки CSS

Анимировать высоту HTML-элемента с помощью только CSS и без использования хака? Стефан Джудис предлагает интересное решение в своей статье. Хитрость заключается в том, чтобы привязать переход к свойствам CSS-сетки, в частности к высоте строки, и обернуть содержимое внутри элемента дополнительным вспомогательным div с overflow: hidden.

Код может выглядеть следующим образом:

Если вам интересно больше, читайте подробнее в теме .

CSS анимация display: none для display: block

Переход к свойству CSS display? Класс! Пока что только на бумаге, но кто знает, может скоро мы увидим реализацию и последующую поддержку всеми браузерами ;) Пока что эта особенность находится только в черновиках CSS Working group , но мы можем увидеть презентацию уже сейчас.

CSS - text-wrap: balance

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

Модель элемента остается прежней (ширина не изменяется), текст просто обертывается. По соображениям производительности это работает только для заголовков до 4 строк. Более подробную информацию и примеры использования читайте в статье Ахмада Шадида .

Мы разрабатываем уникальные сайты, успешные интернет-магазины и веб-приложения | SUPERKODERS