Category: CSS 3

19
Фев
2021

Пора попрощаться с пиксельными единицами измерения

От автора: если вы проектируете или разрабатываете веб-сайты, не используйте px. Абсолютные единицы (px, in, mm, cm, pt, и pc) не подходят как для доступности и адаптивного дизайна, так и при использовании таблиц для разметки. Из всех доступных абсолютных единиц, пиксели (px) являются единственными упорно не желающими уходить. Мы коллективно (и справедливо!) отказались от всех […]

11
Фев
2021

Действительно ли Tailwind CSS того стоит?

От автора: я никогда не стремлюсь специально критиковать какие-либо технологии. Я считаю, что у каждой технологии есть свой допустимый вариант использования. Но как разработчику необходимо проанализировать технологию, а также ее плюсы и минусы, прежде чем принимать ее как есть. Одна из новейших технологий, которой в наши дни уделяется много внимания, — это Tailwind CSS. Когда […]

10
Фев
2021

CSS Clamp(): адаптивная комбинация, которую мы все ждали

От автора: сегодня такое прекрасное время для написания CSS. Бывали у вас такие моменты, когда вы что-то кодируете и думаете про себя: «Я хочу, чтобы этот [текст, изображение, поле, вставьте элемент по вашему выбору здесь] увеличивался или уменьшался в зависимости от размера области просмотра … но только до определенного момента?». Если вы еще не испытали […]

03
Фев
2021

Изучение нового CSS Houdini Painting API

От автора: в статье будут рассмотрены низкоуровневые API, которые подключаются к процессу стилей и макета движка рендеринга вашего браузера. Примечание. Исходный код демонстрации, обсуждаемой во второй половине этой статьи, можно найти на GitLab. Как я уже упоминал в своей недавней статье об анимации холста внутри компонентов React, мне нравится HTML-холст. Поэтому я был очень взволнован, […]

01
Фев
2021

Индивидуальные свойства преобразования CSS в Safari Technology Preview

От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate. Итак, вместо того, чтобы связывать эти три функции […]

25
Янв
2021

Прикрепленные элементы сетки в CSS

От автора: если вы когда-либо пытались поместить липкий элемент в макет сетки и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы, возможно, замечали, что position: sticky с CSS Grid не работает. Не стоит волноваться! Вполне возможно совместить эти два макета для работы вместе. Все, что вам, вероятно, понадобится, это еще одна строка CSS. Проблема […]

18
Янв
2021

Обработка короткого и длинного контента в CSS

От автора: при создании макета в CSS важно учитывать и тестировать краткий и длинный текстовый контент. Четкое представление о том, что делать, если текст различается по длине, может предотвратить множество нежелательных проблем. Есть много ситуаций, когда добавление или удаление одного слова может изменить внешний вид дизайна или, что еще хуже, сломать его и сделать недоступным. […]

15
Янв
2021

Отдельные свойства преобразования CSS

От автора: CSS-трансформации в интернете появились вместе с CSS-анимациями и CSS-переходами для добавления визуальных эффектов и движения в Интернете. Эти технологии были основным продуктом веб-платформы и инструментария веб-разработчиков более десяти лет. Фактически, свойство CSS transform впервые появилось в Safari еще в июле 2008 года, когда появилась iPhone OS 2.0. Вы можете найти некоторые архивные публикации […]

12
Янв
2021

Что такое flex-grow, flex-shrink и flex-basis

От автора: когда вы применяете свойство CSS к элементу, происходит множество вещей, невидимых на первый взгляд. Например, допустим, у нас есть такой HTML: [crayon-5ffd568eb6235798115921/] А потом мы пишем CSS … [crayon-5ffd568eb623b232158236/] Технически это не один стиль, который мы применяем, когда пишем одну строку CSS выше. Фактически, здесь к элементам .child будет применен целый набор свойств, […]

11
Янв
2021

Как получить совместимые липкие элементы на всю ширину

От автора: на днях у меня было уникальное задание: создать макет с элементами на всю ширину, при этом один элемент должен оставаться наверху. Это оказалось довольно сложно осуществить, поэтому я документирую данный случай, если кому-то понадобится воссоздать тот же эффект. Часть хитрости была связана с логическим позиционированием на маленьких экранах. Идея состоит в том, чтобы […]

04
Янв
2021

Динамические размеры липкой боковой панели с HTML и CSS

От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями. Но липкое позиционирование […]

28
Дек
2020

Подробное рассмотрение CSS Grid minmax()

От автора: существует множество учебных пособий и руководств, которые обучают CSS-grid в целом, и я писал об этом несколько раз. Однако я заметил, что существует неправильное понимание функции minmax(), поскольку большинство статей являются общими или не содержат достаточного объяснения и реальных примеров использования. minmax() очень мощный и полезный инструмент. По этой конкретной причине я подумал, […]

24
Дек
2020

Переменные Sass, CSS, а также переменные семантической темы

От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности». Добавление соответствующей «Темной темы» в приложение некоторое время ожидало своей очереди, и, увидев […]

23
Дек
2020

Дизайн с адаптивной высотой

От автора: термин «Адаптивная верстка» часто подразумевает под собой проверку браузера в области просмотра на разной ширине и различных по размерам устройств. Мы всегда тестируем браузер по горизонтали, уменьшая ширину, но я редко встречал какие-либо соображения по поводу тестирования по вертикали за счет уменьшения высоты окна браузера. В глубине души возникает вопрос: нужно ли нам […]

22
Дек
2020

Привлекайте внимание пользователя с помощью селектора CSS :focus-within

От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента. Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже: Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже. Селектор :focus-within + псевдоэлементы ::before + абсолютное […]

18
Дек
2020

Сравнение и объяснение всех единиц измерения CSS

От автора: каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть. Теперь, несмотря на то, что CSS не является языком программирования (разберитесь с этим), его все еще так характеризуют. […]

07
Дек
2020

Нестандартное мышление с CSS Grid

От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так? Некоторые примеры макетов из Grid by Example Рэйчел Эндрю […]

03
Дек
2020

«Универсальный селектор CSS работает медленно» — еще один фэйк!

От автора: в целом, в веб-разработке есть реальная проблема с честностью и рациональным мышлением. Есть много педантичной чепухи, которая продвигается как хорошая практика, полностью основанная на сфабрикованных «истинах», которые очень далеки от реальности. Одним из таких больших заблуждений является идея о том, что «универсальный селектор» — одиночная звездочка — медленный, сбивающий с толку, трудный для […]

30
Ноя
2020

CSS clamp() для адаптивного дизайна

От автора: CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw. Этот метод полезен, когда ваша цель — создать привлекательный дизайн для […]

26
Ноя
2020

Новая функция CSS image

От автора: копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время. Одна из новых функций — новая функция image(). Она даст нам больше контроля над загрузкой изображений в CSS. Давайте рассмотрим возможности совершенно […]

25
Ноя
2020

min(), max() и clamp(): три логические функции CSS

От автора: узнайте, как управлять размером элементов, поддерживать правильный интервал и реализовывать гибкую типографику с помощью этих хорошо поддерживаемых функций CSS. Поскольку адаптивный дизайн развивается и становится все более детализированным, сам CSS постоянно развивается и предоставляет авторам больший контроль. Функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из последних […]

20
Ноя
2020

:focus-visible уже доступно

От автора: одна из наиболее важных функций веб-сайта, созданного с учетом специальных возможностей — это возможность перемещаться по нему с помощью клавиатуры. Большинство слепых пользователей и многие пользователи с ограниченными двигательными возможностями полагаются на навигацию с помощью клавиатуры, будь то стандартная клавиатура или устройство, имитирующее функционал клавиатуры. Поэтому необходимо обеспечить четкие визуальные индикаторы, выделяющие элемент, […]

19
Ноя
2020

Макет без полей с использованием CSS Grid

От автора: когда-то существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было трудно сделать правильно: Макет Святого Грааля. Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и float, и ни один из них не подходил для этой задачи. Технически […]

18
Ноя
2020

Все о переменных CSS

От автора: переменные CSS (также известные как пользовательские свойства) поддерживаются в веб-браузерах почти четыре года. Мне нравится использовать их в зависимости от проекта и ситуации. Они очень полезны и просты в использовании, но часто фронтенд-разработчик может неправильно их использовать или неправильно понимать. Основная цель этой статьи заключается в том, что я хотел создать место, где […]

17
Ноя
2020

Руководство по HTML и CSS формам

От автора: исторически HTML-формы были довольно сложными — во-первых, потому что требовалось хотя бы немного JavaScript, а во-вторых, потому что никакое количество CSS не могло заставить их работать. Однако это не обязательно верно в случае современного веб, поэтому давайте узнаем, как размечать формы, используя только HTML и CSS. Базовая структура Начните с элемента form. Здесь […]

16
Ноя
2020

«Адаптивный» размер шрифта с использованием чистого CSS

От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3. Хотя, к сожалению, такие проблемы распространены среди тех, […]

13
Ноя
2020

Инспектирование CSS Grid

От автора: в этом руководстве показано, как определять сетки CSS на странице, инспектировать их и устранять проблемы с макетом в панели Элементы Chrome DevTools. Откройте для себя CSS-сетки Когда к HTML-элемент на странице применено display: grid или display: inline-grid, вы можете увидеть значок grid рядом с ним в панели Элементы. Щелкните значок, чтобы переключить отображение […]

12
Ноя
2020

Как в CSS сделать слой полупрозрачного фона, не затрагивая текст

От автора: давайте посмотрим, как с помощью CSS сделать слой полупрозрачного фона, не затрагивая текст. Допустим, у вас есть изображение, подобное этому крабу, и вы хотите разместить его в пользовательском интерфейсе под текстом. [crayon-5facf780d5550297842517/] Но если вы просто поместите изображение позади текста, текст может быть трудночитаемым, поэтому вам также нужно добавить более темное полупрозрачное наложение […]

11
Ноя
2020

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта […]

10
Ноя
2020

Поиск первопричины ошибки в CSS

От автора: как фронт-энд разработчик, вы сталкивались с множеством ошибок CSS, которые могут помешать пользователю завершить или успешно выполнить свою задачу. Ошибка CSS может быть визуальной или технической, и оба этих типа могут повлиять на взаимодействие с пользователем. Иногда вы торопитесь и у вас нет времени на полную отладку и исправление ошибки, поэтому вы работаете […]