Рубрика «css» - 2

DRY-фреймворк: продолжение - 1

Особая благодарность автору идеи @akopyl Его статья по теме.

Идея нехитрая, но очень заманчивая — пишешь CSS, пишется и CSS и HTML одновременно. Это ускорит и упростит разработку, да и реализовать несложно — HTML очень простой язык, по большому счётуЧитать полностью »

Вступление

Недавно я обнаружил интересную ошибку в работе emoji-picker-element:

Я работаю на экземпляре fedi с 19 тыс. пользовательских эмодзи [...], и когда я открываю панель выбора эмодзи [...], страница замирает как минимум на целую секунду, а после этого на некоторое время замирает общая производительность.

Если вы не знакомы с Mastodon или Fediverse, то на разных серверах могут быть свои собственные эмодзи, как в Slack, Discord и т.д. Наличие 19k (на самом деле ближе к 20k в данном случае) крайне необычно, но не является чем-то неслыханным.

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • Почему в наших дизайн-системах и библиотеках есть сломанные нестандартные радиокнопки;
  • Мой способ отказаться от ссылки для изображения с сохранением интерактивности;
  • Дублирование стилей при наведении для фокуса вводит меня в ступор;
  • Можно ли скрыть кнопку с помощью атрибута disabled от скринридера.

Давайте начнём!

Читать полностью »

Черт тебя возьми, CSS. Часть 3 - 1

Привет. Я продолжаю делиться «косяками» CSS, которые могут сбить нас с толку. Мне не нравится, что многие плюются от него. Конечно, не без оснований. Я их понимаю, потому что тоже плевался.

Только мне нравится CSS. Хоть и потратил множество часов на изучение неочевидных моментов, я не хочу, чтобы у языка была слава «костыля». Подумав, как помочь другим меньше мучиться, я собираю и объясняю неочевидности CSS.

Читать полностью »

На одном внутреннем мероприятии Илья Полянский рассказал о градиентах и цветовых моделях, а я записал и отредактировал его рассказ.

В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.

Представьте любую из ситуаций:

Магия CSS на практике: советы по вёрстке от гика. Часть 4 - 1

Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но пожалуйста, относитесь к этому контенту, как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня мы рассмотрим:

  • почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
  • чем можно заменить объявления свойства height со значением auto для изображений;
  • какой есть нюанс при установке максимальной ширины у группы элементов;
  • плавную прокрутку без неприятных ситуаций для пользователя;
  • чего не хватает при использовании фоновых изображений.

Давайте посмотрим, что я вам подготовил.

Читать полностью »

Неизвестно полезный CSS. Часть 4 - 1

Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.

Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

  • сброс стилей до значений, взятых из веб-стандартов;
  • возврат значений свойств, установленных в браузере;
  • что можно сделать с прыжками контента при открытии и закрытии модального окна;
  • возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
  • способ стилизации элементов на языке, отличающимся от основного.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать полностью »

Магия CSS на практике: советы по вёрстке от гика. Часть 3 - 1

Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как к просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня мы рассмотрим:

  • подходы при стилизации элементов для вёрстки текста;
  • какая может быть проблема с радиокнопками в вашем проекте;
  • как задать размеры с использованием функций min() и max();
  • CSS-наследование и свойство line-height;
  • для чего делать подсказки в имени класса.

Давайте посмотрим, что я вам подготовил.

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • какие сюрпризы есть при использовании свойства display;
  • о чём нужно помнить при вёрстке кнопки «Показать пароль»;
  • зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
  • как можно переборщить с заголовками и какие проблемы будут.

Давайте начнём!

Читать полностью »

Магия CSS на практике: советы по вёрстке от гика - 1

Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.

Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

  • как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
  • про свойство inset, сокращающее код на целых три строки;
  • мой сниппет для расширения интерактивной области у кнопок и ссылок;
  • стиль написания медиа-запросов, позволяющий сократить количество правил;
  • альтернативный способ центрирования элемента без свойства transform.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js