Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов. А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать его бояться!
Рубрика «css»
Магия CSS на практике: советы по вёрстке от гика. Часть 5
2024-10-22 в 9:01, admin, рубрики: css, ruvds_статьи, верстка, лайфхакиЯ снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Неизвестно полезный CSS. Часть 5
2024-10-16 в 9:01, admin, рубрики: css, ruvds_статьи, web-разработка, верстка, лайфхакиПривет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Как нарисовать квадрат 3 × 3 см на веб-странице*
2024-10-04 в 14:00, admin, рубрики: css, веб-дизайн, верстка сайтов, интерфейсы, типография, яндекс* Не привлекая внимания санитаров
Особая благодарность автору идеи @akopyl Его статья по теме.
Идея нехитрая, но очень заманчивая — пишешь CSS, пишется и CSS и HTML одновременно. Это ускорит и упростит разработку, да и реализовать несложно — HTML очень простой язык, по большому счётуЧитать полностью »
Улучшение производительности рендеринга с помощью CSS content-visibility
2024-09-29 в 11:15, admin, рубрики: content-visibility, cssВступление
Недавно я обнаружил интересную ошибку в работе emoji-picker-element
:
Я работаю на экземпляре fedi с 19 тыс. пользовательских эмодзи [...], и когда я открываю панель выбора эмодзи [...], страница замирает как минимум на целую секунду, а после этого на некоторое время замирает общая производительность.
Если вы не знакомы с Mastodon или Fediverse, то на разных серверах могут быть свои собственные эмодзи, как в Slack, Discord и т.д. Наличие 19k (на самом деле ближе к 20k в данном случае) крайне необычно, но не является чем-то неслыханным.
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10
2024-09-27 в 6:00, admin, рубрики: accessibility, css, html, ruvds_статьи, версткаХабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
- Почему в наших дизайн-системах и библиотеках есть сломанные нестандартные радиокнопки;
- Мой способ отказаться от ссылки для изображения с сохранением интерактивности;
- Дублирование стилей при наведении для фокуса вводит меня в ступор;
- Можно ли скрыть кнопку с помощью атрибута
disabled
от скринридера.
Давайте начнём!
Привет. Я продолжаю делиться «косяками» CSS, которые могут сбить нас с толку. Мне не нравится, что многие плюются от него. Конечно, не без оснований. Я их понимаю, потому что тоже плевался.
Только мне нравится CSS. Хоть и потратил множество часов на изучение неочевидных моментов, я не хочу, чтобы у языка была слава «костыля». Подумав, как помочь другим меньше мучиться, я собираю и объясняю неочевидности CSS.
Как делать чистые градиенты
2024-09-14 в 16:59, admin, рубрики: css, figma, RGB, градиенты, цветовая модельНа одном внутреннем мероприятии Илья Полянский рассказал о градиентах и цветовых моделях, а я записал и отредактировал его рассказ.
В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.
Представьте любую из ситуаций:
Магия CSS на практике: советы по вёрстке от гика. Часть 4
2024-09-10 в 9:01, admin, рубрики: css, ruvds_статьи, верстка, лайфхакиЯ снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но пожалуйста, относитесь к этому контенту, как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня мы рассмотрим:
- почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
- чем можно заменить объявления свойства
height
со значениемauto
для изображений; - какой есть нюанс при установке максимальной ширины у группы элементов;
- плавную прокрутку без неприятных ситуаций для пользователя;
- чего не хватает при использовании фоновых изображений.
Давайте посмотрим, что я вам подготовил.