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

RedDeveloper
02.05.2023 10:41
Полеты по миру фронтенда, том 9

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

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

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

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

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

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

Ввод нового кода
Ввод нового кода

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

Источник: https://caniuse.com/
Источник: https://caniuse.com/

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

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

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

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

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

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

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

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

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

Переход к свойству CSS display? Класс! Пока что только на бумаге но кто знает может

CSS - text-wrap: balance

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

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

CSS- text-wrap: balance
CSS- text-wrap: balance

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

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

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.