#баг дня

Я не знаю, кому в 2021 году приходит в голову интересоваться лимитом CSS на селекторы и правила в практическом смысле, но всё же.

Да, IE < 9 не поддерживал больше 4096 правил в одном файле. Это уже много, но можно было подключить второй файл и продолжить.

Так вот, к багу дня. В Chrome есть проблема восьмилетней давности: https://bugs.chromium.org/p/chromium/issues/detail?id=481273

Перевожу: если число селекторов в строке одной композиции больше 4096, «лишние» — проигнорируются. Пример: http://jsfiddle.net/WdyBE/58/

Я понятия не имею, зачем это чинить. Разработчики Chrome, похоже, тоже.

#css #limit #chrome #ie

#заметка дня

Если у вас есть селектор с префиксом и без префикса, например :-webkit-autofill и :autofill или селекторы с разными префиксами (-moz-, -webkit-), никогда не пишите так:

:-webkit-autofill, :autofill {}


Весь селектор станет невалидным. Нужно или разделять их на два разных блока, или же использовать :is:

:is(:-webkit-autofill, :autofill) {}

К сожалению, с псевдоэлементами такое (:is) не прокатит. Так что пишите ваши правила для, например, ::-webkit-progress-bar и ::-moz-progress-bar раздельно.

К счастью, подобное приходится проворачивать всё реже. Правила и селекторы с префиксами сейчас довольно редки.

#css #is #prefix #vendor

#фишка дня

Если вам знаком не только JavaScript, а ещё один из языков C-семейства (привет, родной универ),  то наверняка вы использовали библиотечную функцию printf:

printf (“It’s %d %s", 10, "here!");

Занимается она тем, что выводит форматирует передаваемые ей аргументы согласно заданному правилу. Нужно вывести целое десятичное число? Указываете %d. Строку? %s. На простом языке – это плейсхолдеры.

Так вот, наша любимая консоль тоже поддерживает подобные спецификаторы формата!

%s - строка
%i or %d - целое число (будет преобразовано)
%f - число с плавающей запятой
%o - выводит элемент DOM
%O - выводит JS-объект

И вишенка на торте: %c позволяет передать CSS выводимому тексту! В формате инлайн-стилей.

#printf #console #js

#статья дня

Вдогонку к различным обучающим играм и конструкторам (например, https://cssgridgarden.com/), рекомендую ещё один полезный ресурс: https://fjolt.com/article/a-guide-to-css-grid

Это статья про CSS Grid, но с интерактивным генератором кода. Поэтому, вполне логично добавить хэштег #инструмент.

Довольно кратко, идеально для быстрого старта.

#css #grid #generator

#баг дня

Есть очень интересное свойство, из рабочих черновиков: overscroll-behavior. За что оно отвечает?

Ну, например, есть у вас страница и диалог чата. Вы скроллите диалог, доходите до конца ленты — и страница тоже начинает прокручиваться. Не очень приятно. И это можно решить, установив на диалог правило overscroll-behavior: contain.

А вот если установить   overscroll-behavior: none; на html,  можно запретить «pull-to-refresh» («потяните чтобы обновить»).

Сейчас будет сложно.

Баг дня в том, что спецификация здесь недостаточно чётко описывает взаимодействие прокрутки документа и доступной области экрана (вьюпорта, viewport).

Все остальные, относящиесяк к скроллу правила (scroll-padding, scroll-snap-type, scroll-behavior), пробрасываются (propagate) из документа во вьюпорт только из :root-элемента. Т. е. из html.

В итоге Safari и Chrome ожидают установки overscroll-behavior на body. Но это неправильно и скоро будет исправлено.

В общем, ситуация такова: ставьте overscroll-behavior и на html и на body. Тогда в будущем всё будет хорошо.

#css #html #scroll #overscroll

Макеты реальных проектов, для тренировки навыков вёрстки сайтов - @build_html

#codepen дня

Модалка на чистом CSS? Да ещё с оверлеем? Реальность!

https://codepen.io/bramus/pen/KKaPJdr

Ага, Ван Дамм. Опять.

Реализована путём вкладывания dialog в details-summary блок. Оверлей же — реализован классическим способом, фиксированный псевдоэлемент.

Прекрасно.

#css #modal #details #dialog

#ссылка дня

Ищете анимированных эффектов появления? Их есть у меня!

https://www.transition.style/ — библиотека эффектов появления/скрытия элементов, в основе которой лежат clip-path-анимации. На каждый можно сослаться, чтобы продемонстрировать коллеге.

И естественно, код можно настроить и тут же быстро скопировать.

#css #animation #library #clip #clippath

#статья дня

…я не говорю, что все поголовно вешают свои обработчики кликов на div. Но наверняка многие до сих пор используют ссылки (спасибо дизайнерам за унификацию). Или просто любой попавшийся элемент.

Не надо так.

Тег button с нами очень давно, его нужно лишь правильно приготовить. Иначе ссылки и кнопки будут выглядеть по-разному:

1. Сбросить стили браузера
2. Унифицировать с a
3. Добавить активных состояний (:focus и :active)
4. Правильно обработать клавиатурную навигацию (:focus-visible) дабы не раздражать нежные фибры души дизайнеров, но уважать остальных людей.

В общем, к делу. Сама статья: https://fvsch.com/styling-buttons

И готовый результат (я переложу его из статьи в CodePen, добавив стили поддержки :focus-visible): https://codepen.io/alinaki/pen/LYxbvOw

#css #button #focus #focusvisible

#инструмент дня

Не нравятся create-react-app или дефолтные консольные инструменты Vue.js, но конфигурировать Webpack тоже не нравится?

Да, конфигурирование может быть простым накидыванием плагинов, а может потрепать нервы.

Но для старта можно воспользоваться https://createapp.dev/ и радоваться.

Выбираем базу, транспилятор, тестовую среду, загрузчики стилей, накидываем оптимизаций – и 💥 вы уже фронт-опс!

#webpack #snowpack #react #vue #svelte #tool

#заметка дня

На днях я узнал (точнее, глубоко вспомнил) одно интересное свойство атрибута contenteditable. Если кто не знает, этот атрибут – всё ещё лучший способ максимально быстро сделать редактор текста с форматированием. WYSIWYG, короче.

Так вот, свойство это заключается в том, что браузеры до сих пор (а на дворе 2021 год, напомню) по-разному устанавливают параметры по-умолчанию. Chrome и Safari ставят перевод строки, оборачивая текст внутри блочных и флекс-элементов в div, строчным ставит br, а Firefox просто ставит br вообще везде. IE (мир праху его) использовал p. И дальше пошло-поехало.

К счастью, это всё исправляется простым методом document.execCommand: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Думаю, если вы соберётесь писать свой редактор хотя бы ради тренировки – это будет первое, с чего вы начнёте.

#html #javascript #contenteditable

#ссылка дня

Я не фанат подборок типа «10 лучших плагинов для…», но эта – меня покорила.

Сборник из 71 шрифтового эффекта на CSS (JS тоже есть, но мало где). Более того, многие из этих эффектов часто встречаются в различных проектах (игра с тенями и различные виды подчёркиваний, например). Есть даже реализованные на CSS шрифты.

В общем, определённо стоит вашего внимания: https://freefrontend.com/css-text-effects/

Да и весь портал неплох.

#css #font #fonts

#codepen дня

Сегодня у нас кодпен от участника сообщества @css_ru.

Передаю слово автору, @akrogu:

Рин Нохара из аниме «Наруто»:
https://codepen.io/ahmed364051/details/mdOYrRp

Многие из нас в детстве смотрели аниме «Наруто», и вдохновлялись разными образами этого аниме будь это Наруто, Саске, Итачи, но у меня в памяти навсегда останется образ простой и в то же время непосредственной девушки, которая исполняла роль миротворца в команде номер 7, любовь 90% мужчин, смотревших аниме "Наруто" — Рин Нохара ❤️

При создании Рин я использовал ванильные HTML и CSS так, как хотел создать интерес в первую очередь у новичков к web-разработке посредством рисования на css, для самодокументирования было использовано дублирование селекторов.

P.S. #сsschallengeживи

Присылайте ваши работы в @css_ru или @htmlshitchat.

#заметка дня

В общем, есть такая старая как мир техника защиты форм от ботов и спама: создать визуально скрытое поле ввода. Предполагается, что пользователи в него текст не введут, поскольку не увидят, а боты — как раз введут, глаз-то у них нет.

После чего на сервере вы проверяете форму и отсекаете данные, если поле было заполнено. Вот так вот просто.

Но есть нюанс. Даже несколько.

Скринридеры всё равно уведомят слабовидящего пользователя о таком поле, а стоит вам добавить, например, атрибут aria-hidden, как бот сходу «догадается».

Да и в целом, боты нынче не на коленке пишутся, зашифруете название класса – считают стили.

В сухом остатке, я бы порекомендовал настраивать полновесную captcha. Предложенное решение хорошо, когда у вас ну совсем времени нет, но нужно выкатить хоть что-то.

#captcha

#фишка дня

Одной из самых раздражающих особенностей SVG является работа с текстом. Она безумно сложна и нелогична.

Да, если преобразовать текст в кривые, можно творить чудеса (например, имитировать рукописный ввод: https://codepen.io/alinaki/pen/qoPRRE), но это лишает нас возможности изменять текст по желанию. Мягко говоря, неудобно.

Да, есть элемент text. С его помощью можно поменять размер шрифта, указать координаты размещения, трансформировать. Но вы даже фон не зададите таким образом!

А ведь так хотелось бы иметь возможность встраивать в SVG целые куски вёрстки…

Так можно же 😉

На помощь приходит элемент foreignObject!

Он фактически позволяет встроить в SVG любой другой элемент! И задача поставить фон тексту уже не кажется такой безумной, а наоборот, становится элементарной.

Важным трюком является установка высоты и ширины в 1 пиксель, при этом обязательно включение overflow: visible в CSS. Тогда вам не придётся задумываться о размерах встраиваемого объекта вообще. Иначе – обрежет.

Самая прекрасная часть: foreignObject автоматически озаботится изменением размера вашего элемента и контента в нём в зависимости от ширины SVG! Да, вы всё правильно услышали: масштабирование выполняется автоматически.

Чтобы вам не было скучно, я подготовил небольшой CodePen: https://codepen.io/alinaki/pen/PoWjdrY

На нём изображена карта России с парой городов. При наведении на город раскрывается флажок с его названием.

К сожалению, стоит установить любое значение transform или transition на содержимое foreignObject — и Safari просто перестаёт отрисовывать его. Пришлось сбросить. Ищу в трекере баг по этому поводу.

Поддержка? Ну в IE не работает, как обычно 😅 А в Safari и Firefox есть пара багов, связанных с переходами и анимацией. Но все решаемы.

#svg #foreignobject #text

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap

#библиотека дня

В процессе создания PDF на сервере или прямо в браузере немало боли. И далеко не всегда можно убедить заказчика обойтись режимом печати.

Задачу можно решить разными способами, но сегодня я бы хотел рассказать о библиотеке react-pdf. Она как раз обновилась до второй версии.

Во второй версии изменён процесс рендера и сама она переписана в функциональном стиле, но нас, как пользователей, интересует не это.

А интересует нас появление SVG, улучшенная поддержка CSS и новый API на хуках для использования в ваших компонентах.

Думаю, воспользуюсь ей в ближайшем проекте.

#javascript #react #pdf

#фишка дня

Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.

Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (:hover), на фокус (:focus), на нажатие (:active).

Так вот, если с первыми двумя состояниями всё ясно, то нажатие – процесс мгновенный, т. е. длится явно меньше базовых 300 мс. Ваша анимация просто не успеет отыграть! Разве только вы не задержите кнопку мыши или тачпада нажатой.

И решение весьма неожиданное: :not(:active).

Внезапно, не правда ли? Ведь это, по факту, состояние кнопки по-умолчанию.

Так в этом и суть!

Хотим мы, например, стартовать пульсацию по клику. Сам эффект создаётся при помощи по-умолчанию скрытого псевдоэлемента, а секрет в том, что :not(:active) – это самое состояние перезапускает.

В общем, статья по поводу: https://codeburst.io/why-you-should-style-the-wrong-button-state-d4e4c2db8f7e

И CodePen, поскольку автор решил ограничиться gist’ом: https://codepen.io/alinaki/pen/wvgeWxY

#css #button #click #animation

#фишка дня

Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.

Джейк Арчибальд предлагает решение на SVG и foreignObject: https://jsbin.com/yiwipay/edit?html,css,output

Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.

#svg #img #foreignObject #crop

#codepen дня

Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.

Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP

Вдохновление штука такая.

Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагается.

#gsap #coverflow #carousel