#статья дня

Ну что, пришло время продолжить нашу CSS-in-JS сагу. Наконец-то пришло время поговорить о Styled Components.

Буквально – стилизованные компоненты. Можно дальше не читать.

Шучу. Там немного побольше.

#css #js #react #styledcomponents

#фишка дня

Не забывайте помогать своим пользователям вводить нужные данные. Используйте атрибут inputmode на полях ввода: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Особенно неприятно, когда просят ввести числа, а открывается полная клавиатура. Уж ввод e-mail пережить как-то можно 😊

#css #html #mobile #keyboard

#codepen дня

Анна Тюдор (Ann Tudor) – одна из крутейших разработчиков на CodePen. Я крайне рекомендую ознакомиться с её работами, если вам интересен CSS с математической стороны.

Она зачастую снимает видео о процессе создания своих работ, и вот случился казус: алгоритмы YouTube посчитали одно из недавних видео содержащим сцены сексуального характера. Ну на самом деле, миниатюру. Анна сообщила об этом в своём Твиттере.

Ну да, логично. Что может быть сексуальней CSS-искусства.

#css #art #youtube #video

#игра дня

GDPR и 153-ФЗ сделали из нас джедаев согласия с условиями cookies и обработки данных. Я лично создавал десятки различных окошек соглашений, утомительное и бестолковое занятие.

Но так ли ты хорош в отбивании претензий на личную жизнь?

Попробуй себя: https://cookieconsentspeed.run/

#статья дня

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

Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.

Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами

Можно, конечно, просто посоветовать перестать ныть и начать вникать, но это будет слишком грубым описанием этой прекрасной работы.

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology

#фишка дня

Глядите-ка, Chrome DevTools теперь показыают колорпикер на пользовательских свойствах с цветом!

#chrome #devtools #css #color

#фишка дня

Иногда возникает задача поставить перевод строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.

На помощь приходят псевдоэлементы.

Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.

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

Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.

#css #tricks #unicode #after #newline

#ссылка дня

В мире явно не хватает ресурсов с иконками. Особенно с SVG-иконками. Держите ещё один: https://www.svgrepo.com/

Все изображения свободные и/или бесплатные (естественно, уважайте лицензии). Удобный поиск, коллекции. Иконки можно сохранять (в local storage, аккаунт не нужен).

#svg #icons #icon #catalog

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

Псевдо-класс :is штука очень и очень новая (пользователи Firefox в этот момент презрительно хмыкают).

Но она уже в релизах всех основных браузеров!

Вы только представьте, теперь можно писать так:

.content :is(h1, h2) {}

...даже в querySelector! Больше никаких глупых ошибок синтаксиса, когда вы забыли два раза написать селектор.

Горячо нами любимый Ван Дамм, который Брамус, делится тремя вещами, которые обязательно нужно помнить при работе с :is:

1. Он прощает ошибки
2. Его специфичность равна специфичности самого «тяжёлого» аргумента.
3. Он не работает с псевдо-элементами. Пока.

Сама статья:
https://www.bram.us/2021/03/19/three-important-things-you-should-know-about-css-is/

Ну и вдогонку — калькулятор специфичности, пусть будет. Правда, о существовании :is он пока не знает, зато вот :not ведёт себя точно так же.

#баг дня

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

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

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

Перевожу: если число селекторов в строке одной композиции больше 4096, «лишние» — проигнорируются. Пример: https://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

#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