#заметка дня
В общем, есть такая старая как мир техника защиты форм от ботов и спама: создать визуально скрытое поле ввода. Предполагается, что пользователи в него текст не введут, поскольку не увидят, а боты — как раз введут, глаз-то у них нет.
После чего на сервере вы проверяете форму и отсекаете данные, если поле было заполнено. Вот так вот просто.
Но есть нюанс. Даже несколько.
Скринридеры всё равно уведомят слабовидящего пользователя о таком поле, а стоит вам добавить, например, атрибут
Да и в целом, боты нынче не на коленке пишутся, зашифруете название класса – считают стили.
В сухом остатке, я бы порекомендовал настраивать полновесную captcha. Предложенное решение хорошо, когда у вас ну совсем времени нет, но нужно выкатить хоть что-то.
#captcha
В общем, есть такая старая как мир техника защиты форм от ботов и спама: создать визуально скрытое поле ввода. Предполагается, что пользователи в него текст не введут, поскольку не увидят, а боты — как раз введут, глаз-то у них нет.
После чего на сервере вы проверяете форму и отсекаете данные, если поле было заполнено. Вот так вот просто.
Но есть нюанс. Даже несколько.
Скринридеры всё равно уведомят слабовидящего пользователя о таком поле, а стоит вам добавить, например, атрибут
aria-hidden, как бот сходу «догадается».Да и в целом, боты нынче не на коленке пишутся, зашифруете название класса – считают стили.
В сухом остатке, я бы порекомендовал настраивать полновесную captcha. Предложенное решение хорошо, когда у вас ну совсем времени нет, но нужно выкатить хоть что-то.
#captcha
#фишка дня
Одной из самых раздражающих особенностей SVG является работа с текстом. Она безумно сложна и нелогична.
Да, если преобразовать текст в кривые, можно творить чудеса (например, имитировать рукописный ввод: https://codepen.io/alinaki/pen/qoPRRE), но это лишает нас возможности изменять текст по желанию. Мягко говоря, неудобно.
Да, есть элемент text. С его помощью можно поменять размер шрифта, указать координаты размещения, трансформировать. Но вы даже фон не зададите таким образом!
А ведь так хотелось бы иметь возможность встраивать в SVG целые куски вёрстки…
Так можно же 😉
На помощь приходит элемент foreignObject!
Он фактически позволяет встроить в SVG любой другой элемент! И задача поставить фон тексту уже не кажется такой безумной, а наоборот, становится элементарной.
Важным трюком является установка высоты и ширины в 1 пиксель, при этом обязательно включение
Самая прекрасная часть:
Чтобы вам не было скучно, я подготовил небольшой CodePen: https://codepen.io/alinaki/pen/PoWjdrY
На нём изображена карта России с парой городов. При наведении на город раскрывается флажок с его названием.
К сожалению, стоит установить любое значение
Поддержка? Ну в IE не работает, как обычно 😅 А в Safari и Firefox есть пара багов, связанных с переходами и анимацией. Но все решаемы.
#svg #foreignobject #text
Одной из самых раздражающих особенностей 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
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
В процессе создания PDF на сервере или прямо в браузере немало боли. И далеко не всегда можно убедить заказчика обойтись режимом печати.
Задачу можно решить разными способами, но сегодня я бы хотел рассказать о библиотеке react-pdf. Она как раз обновилась до второй версии.
Во второй версии изменён процесс рендера и сама она переписана в функциональном стиле, но нас, как пользователей, интересует не это.
А интересует нас появление SVG, улучшенная поддержка CSS и новый API на хуках для использования в ваших компонентах.
Думаю, воспользуюсь ей в ближайшем проекте.
#javascript #react #pdf
В процессе создания PDF на сервере или прямо в браузере немало боли. И далеко не всегда можно убедить заказчика обойтись режимом печати.
Задачу можно решить разными способами, но сегодня я бы хотел рассказать о библиотеке react-pdf. Она как раз обновилась до второй версии.
Во второй версии изменён процесс рендера и сама она переписана в функциональном стиле, но нас, как пользователей, интересует не это.
А интересует нас появление SVG, улучшенная поддержка CSS и новый API на хуках для использования в ваших компонентах.
Думаю, воспользуюсь ей в ближайшем проекте.
#javascript #react #pdf
react-pdf.org
React renderer for creating PDF files on the browser and server
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.
Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (
Так вот, если с первыми двумя состояниями всё ясно, то нажатие – процесс мгновенный, т. е. длится явно меньше базовых 300 мс. Ваша анимация просто не успеет отыграть! Разве только вы не задержите кнопку мыши или тачпада нажатой.
И решение весьма неожиданное:
Внезапно, не правда ли? Ведь это, по факту, состояние кнопки по-умолчанию.
Так в этом и суть!
Хотим мы, например, стартовать пульсацию по клику. Сам эффект создаётся при помощи по-умолчанию скрытого псевдоэлемента, а секрет в том, что
В общем, статья по поводу: https://codeburst.io/why-you-should-style-the-wrong-button-state-d4e4c2db8f7e
И CodePen, поскольку автор решил ограничиться gist’ом: https://codepen.io/alinaki/pen/wvgeWxY
#css #button #click #animation
Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.
Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (
: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
Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.
Джейк Арчибальд предлагает решение на SVG и foreignObject: https://jsbin.com/yiwipay/edit?html,css,output
Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.
#svg #img #foreignObject #crop
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.
Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP
Вдохновение штука такая.
Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагаются.
#gsap #coverflow #carousel
Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.
Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP
Вдохновение штука такая.
Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагаются.
#gsap #coverflow #carousel
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
#css #table #keyboard #focus #a11y
#заметка дня
Настало время просить прощения и извиняться™.
В посте про правильные анимации по клику на кнопку с использованием трюка
Исправляю ситуацию, ловите именно то, что было задумано изначально: https://codepen.io/alinaki/pen/RwKQpzV
По пути для кодирования SVG я воспользовался инструментом от Йоксель: https://yoksel.github.io/url-encoder/. По большому счёту, это лишь
Кодированные таким образом SVG можно использовать в
Это явно не последняя заметка про стилизацию кнопок, дам подсказку к следующей:
#инструмент #css #button #svg #click #animation
Настало время просить прощения и извиняться™.
В посте про правильные анимации по клику на кнопку с использованием трюка
:not(:active) я приложил видео с сердечком, а реализовал лишь эффект пульсации. Как-то неудобно получилось. Исправляю ситуацию, ловите именно то, что было задумано изначально: https://codepen.io/alinaki/pen/RwKQpzV
По пути для кодирования SVG я воспользовался инструментом от Йоксель: https://yoksel.github.io/url-encoder/. По большому счёту, это лишь
encodeURIComponent().Кодированные таким образом SVG можно использовать в
background, border-image или mask. Без демонстрации тут тоже никуда: https://codepen.io/yoksel/full/WNrLpYWЭто явно не последняя заметка про стилизацию кнопок, дам подсказку к следующей:
boop.#инструмент #css #button #svg #click #animation
#ссылка дня
Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/
«SVG в вебе. Практическое руководство»
В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.
И каждый раз ответы – одинаковые. И не всегда верные и однозначные.
Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.
#svg #sprite #css
Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/
«SVG в вебе. Практическое руководство»
В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.
И каждый раз ответы – одинаковые. И не всегда верные и однозначные.
Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.
#svg #sprite #css
#фишка дня
Пользовательские свойства CSS, иногда с лёгкой руки своей же функции называемые переменными, уже весьма плотно обосновались в стилях.
Особенностей работы с ними огромное множество, но меня повеселил один интересный подход.
Итак, если установить свойству пустое значение при помощи комментария (
Например:
Здесь
Правильно! Можно сбросить значение свойства до пустого по медиа-запросу! Тогда браузер просто пропустит его и применит следующее:
В общем, чтобы далеко не ходить, держите CodePen: https://codepen.io/alinaki/pen/xxgjYpb
Так можно поступать не только с медиа-запросами, но и с псевдоклассами (
Пользовательские свойства CSS, иногда с лёгкой руки своей же функции называемые переменными, уже весьма плотно обосновались в стилях.
Особенностей работы с ними огромное множество, но меня повеселил один интересный подход.
Итак, если установить свойству пустое значение при помощи комментария (
/**/), парсер пропустит его и использует следующее определение. Получается условный оператор на коленке.Например:
body {
background-color:
var(--mq-small, sandybrown)
var(--mq-large, mediumslateblue);
}
Здесь
mq означает «Media Query». Уже догадались, что будет дальше? 🤔Правильно! Можно сбросить значение свойства до пустого по медиа-запросу! Тогда браузер просто пропустит его и применит следующее:
@media (min-width: 640px) {
:root {
--mq-small: /**/ ;
}
}
@media (max-width: 639.5px) {
:root {
--mq-large: /**/ ;
}
}
В общем, чтобы далеко не ходить, держите CodePen: https://codepen.io/alinaki/pen/xxgjYpb
Так можно поступать не только с медиа-запросами, но и с псевдоклассами (
:hover и т. д.). Теперь вам достаточно лишь изменить значение свойства, а не перезаписывать всё правило целиком.#библиотека дня
Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.
Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.
Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.
Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.
Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.
Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.
Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?
Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.
Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/
Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.
Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.
Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.
Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!
#css #table #chart #diagram
Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.
Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.
Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.
Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.
Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.
Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.
Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?
Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.
Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/
Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.
Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.
Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.
Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!
#css #table #chart #diagram
#заметка дня
CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.
Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.
Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.
В оригинальной статье есть генератор, но можно воспользоваться и PostCSS-плагином. По большому счёту мы лишь добавляем множество остановок цвета, чтобы сгладить переход.
Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB
Какой бы способ вы ни применили, доверяйте своим глазам.
#css #color #gradient #easing
CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.
Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.
Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.
В оригинальной статье есть генератор, но можно воспользоваться и PostCSS-плагином. По большому счёту мы лишь добавляем множество остановок цвета, чтобы сгладить переход.
Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB
Какой бы способ вы ни применили, доверяйте своим глазам.
#css #color #gradient #easing
#ссылка дня
Как много сайтов серьёзных инвестиционных компаний вы видели? Обычно считается, если видели один — видели все.
Это не тот случай.
The Yamauchi No. 10 Family Office. Компания, которая управляет инвестициями семьи Хироси Ямаути, президента Nintendo. Что такое Nintendo объяснять, наверное, не надо.
Ещё раз, это — не портфолио веб-дизайнера. Это крупная инвестиционная контора.
Япония удивляет, конечно. Большинство японских сайтов в принципе будто в нулевых остались.
#webgl #pixel #graphics
Как много сайтов серьёзных инвестиционных компаний вы видели? Обычно считается, если видели один — видели все.
Это не тот случай.
The Yamauchi No. 10 Family Office. Компания, которая управляет инвестициями семьи Хироси Ямаути, президента Nintendo. Что такое Nintendo объяснять, наверное, не надо.
Ещё раз, это — не портфолио веб-дизайнера. Это крупная инвестиционная контора.
Япония удивляет, конечно. Большинство японских сайтов в принципе будто в нулевых остались.
#webgl #pixel #graphics
#фишка дня
В CSS-чате с завидной регулярностью спрашивают, как скрыть скроллбар, но оставить возможность скроллить.
Лично мне непонятно, зачем так делать. Оставляйте хоть небольшую подсказку пользователям, на мобильных телефонах и macOS и так скроллбар скрыт (почти) всегда.
Но раз пошла такая пляска, давайте решать проблему. Без JavaScript.
1. Обёртка и избыточная ширина
Старое как мир решение. Добавляем контейнеру избыточную ширину, чтобы его скроллбар вышел за пределы обёртки. В данном случае я предпочитаю создавать избыточную ширину абсолютным позиционированием: https://codepen.io/alinaki/pen/bGgmqVx
25px — ширина скроллбара — взята наобум. Она колеблется от 17 до 23 пикселей в различных средах.
Вы уже чуете, что ерунда какая-то, правда? Но это решение ещё несколько лет назад было единственным, ведь приходилось поддерживать старые браузеры.
2. Правила для работы с полосой прокрутки
Здесь всё максимально просто: у каждого из четырёх (трёх?) современных и сравнительно современных движков имеются соответствующие правила для скрытия полосы прокрутки: https://codepen.io/alinaki/pen/YzNJGOa
Но если вы решились на такое, пожалуйста, дайте пользователю какую-нибудь подсказку, что можно скроллить. Ведь иногда ваш контент может быть поделён ровно по абзацу или строке/колонке.
В таком случае можно, например, наложить тени: https://codepen.io/alinaki/pen/oNBaWvq
#css #scroll #ux
В CSS-чате с завидной регулярностью спрашивают, как скрыть скроллбар, но оставить возможность скроллить.
Лично мне непонятно, зачем так делать. Оставляйте хоть небольшую подсказку пользователям, на мобильных телефонах и macOS и так скроллбар скрыт (почти) всегда.
Но раз пошла такая пляска, давайте решать проблему. Без JavaScript.
1. Обёртка и избыточная ширина
Старое как мир решение. Добавляем контейнеру избыточную ширину, чтобы его скроллбар вышел за пределы обёртки. В данном случае я предпочитаю создавать избыточную ширину абсолютным позиционированием: https://codepen.io/alinaki/pen/bGgmqVx
25px — ширина скроллбара — взята наобум. Она колеблется от 17 до 23 пикселей в различных средах.
Вы уже чуете, что ерунда какая-то, правда? Но это решение ещё несколько лет назад было единственным, ведь приходилось поддерживать старые браузеры.
2. Правила для работы с полосой прокрутки
Здесь всё максимально просто: у каждого из четырёх (трёх?) современных и сравнительно современных движков имеются соответствующие правила для скрытия полосы прокрутки: https://codepen.io/alinaki/pen/YzNJGOa
Но если вы решились на такое, пожалуйста, дайте пользователю какую-нибудь подсказку, что можно скроллить. Ведь иногда ваш контент может быть поделён ровно по абзацу или строке/колонке.
В таком случае можно, например, наложить тени: https://codepen.io/alinaki/pen/oNBaWvq
#css #scroll #ux
#баг дня
Правило clip-path, обрезка, стало нынче довольно популярным.
Но пользоваться им нужно всё так же осторожно. Пример от Анны Тюдор:
От чего конкретно отсчитываются 8% скругления?
Chrome и Safari (Blink и WebKit) отсчитывают их относительно изначального размера элемента.
Firefox (Gecko) – от уже обрезанного прямоугольника.
И, судя по всему, это баг в Firefox. Согласно спецификации, round в inset задаётся согласно синтаксису для border-radius, который в свою очередь устанавливает отсчёт от бокса элемента. Впрочем, прочитать можно как угодно.
И подобных мест в спецификации до сих пор неприлично много.
Пример:
https://codepen.io/alinaki/pen/qBRQRye
#css #firefox #clippath #bug
Правило clip-path, обрезка, стало нынче довольно популярным.
Но пользоваться им нужно всё так же осторожно. Пример от Анны Тюдор:
clip-path: inset(80% 0 0 round 8%)
От чего конкретно отсчитываются 8% скругления?
Chrome и Safari (Blink и WebKit) отсчитывают их относительно изначального размера элемента.
Firefox (Gecko) – от уже обрезанного прямоугольника.
И, судя по всему, это баг в Firefox. Согласно спецификации, round в inset задаётся согласно синтаксису для border-radius, который в свою очередь устанавливает отсчёт от бокса элемента. Впрочем, прочитать можно как угодно.
И подобных мест в спецификации до сих пор неприлично много.
Пример:
https://codepen.io/alinaki/pen/qBRQRye
#css #firefox #clippath #bug
#codepen дня
Мамочки мои, работающий секундомер без единой строчки JavaScript: https://codepen.io/jh3y/pen/jOVmJBL
Когда начинаешь разбирать код – всё довольно просто, анимация через
Рекомендую попастись на странице автора, это его кнопки в стиле CyberPank2077 недавно разлетелись по всем каналам.
👉 @htmlshit
#css #counter #animation #steps
Мамочки мои, работающий секундомер без единой строчки JavaScript: https://codepen.io/jh3y/pen/jOVmJBL
Когда начинаешь разбирать код – всё довольно просто, анимация через
steps для десятых долей, секунд и минут. Но вместе — потрясающе.Рекомендую попастись на странице автора, это его кнопки в стиле CyberPank2077 недавно разлетелись по всем каналам.
👉 @htmlshit
#css #counter #animation #steps
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.
Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы:
И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
https://codepen.io/jh3y/pen/MWWowEb
👉 @htmlshit
#css #input #number #range
Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.
Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы:
:in-range и :out-of-range. Уже понятно, что они делают: если вы установили атрибуты min и max, вышеуказанные псевдоклассы позволят воспользоваться этим знанием в CSS.input:out-of-range ~ span {
color: red;
}
И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
https://codepen.io/jh3y/pen/MWWowEb
👉 @htmlshit
#css #input #number #range
Будни разработчика
#ссылка дня Испанский стыд. Когда делает кто-то другой, а стыдно тебе. Держите немного свежевыжатого: https://www.htmhell.dev/ HTML из ада. Коллекция плохих практик вёрстки, взятая с реальных сайтов. Каждый пример имеет объяснение, почему так делать не…
Ветром принесло новость, что у этого проекта (https://www.htmhell.dev/) появился уродливый брат-близнец: https://csshell.dev/
Отдельного поста не очень пока достоин, так что спешите дополнять. To Hell with bad CSS!
Как всегда, постарайтесь не найти там себя.
Отдельного поста не очень пока достоин, так что спешите дополнять. To Hell with bad CSS!
Как всегда, постарайтесь не найти там себя.
#баг дня
Достаточно странная ситуация, но сочетание свежего правила
https://codepen.io/alinaki/pen/dyNaRgr
https://codepen.io/thebabydino/pen/rNjogOa
Safari и Firefox ведут себя корректно. Если убрать
Ссылка на трекер: https://bugs.chromium.org/p/chromium/issues/detail?id=1166875
Будьте осторожны.
#grid #aligncontent #placecontent
Достаточно странная ситуация, но сочетание свежего правила
aspect-ratio и display: grid ломает позиционирование элементов через align-content или place-content. Вот два разных примера:align-content:https://codepen.io/alinaki/pen/dyNaRgr
place-content:https://codepen.io/thebabydino/pen/rNjogOa
Safari и Firefox ведут себя корректно. Если убрать
padding, то и Chrome начинает позиционировать правильно, но пока что модель сломана.Ссылка на трекер: https://bugs.chromium.org/p/chromium/issues/detail?id=1166875
Будьте осторожны.
#grid #aligncontent #placecontent