Устаревшие CSS-техники, от которых уже можно отказаться

Значимый прорыв формирует отрасль ИИ: melnik909 только что Устаревшие CSS-техники, от которых уже можно отказаться Средний 7 мин 5 Блог компании RUVDS. com CSS * Веб-разработка * Обзор Привет, Хабр! В общении с коллегами я всё чаще замечаю, что многие не знают о последних возможностях CSS.

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

Технические детали

Как человеку, который является поклонником CSS, мне немного грустно это наблюдать. Столько интересных возможностей остаётся без внимания! А ведь с их помощью код нередко становится короче, надёжнее и проще для понимания.

Поэтому я собрал несколько примеров популярных решений прошлого и переписал их, используя новинки CSS, вышедшие за последние несколько лет. Давайте посмотрим, что у меня получилось. Свойство scrollbar-gutterМодальные окна — очень популярный элемент интерфейса.

А я больше всего их не люблю. У них много проблем, но многие мои знакомые сходились в одной. Модальные окна вызывают сдвиги контента при открытии и закрытии.

Отраслевые последствия

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

Для демонстрации проблемы воспользуемся примером сайта Дока. Долгое время эта проблема решалась с помощью смещения элемента body на ширину полосы прокрутки. Например, это делалось свойством margin Более редкий вариант — менять ширину элемента body Был ещё третий вариант, который похож на первый, но в нём используется свойство padding вместо margin.

Его я не нашел, поэтому оставим его без примера. Коллеги, давайте выбросим эти костыли. Теперь можно добавить свойство scrollbar-gutter со значением stable и всё будет работать.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.