От автора: если вы проектируете или разрабатываете веб-сайты, не используйте px. Абсолютные единицы (px, in, mm, cm, pt, и pc) не подходят как для доступности и адаптивного дизайна, так и при использовании таблиц для разметки. Из всех доступных абсолютных единиц, пиксели (px) являются единственными упорно не желающими уходить. Мы коллективно (и справедливо!) отказались от всех […]
От автора: я никогда не стремлюсь специально критиковать какие-либо технологии. Я считаю, что у каждой технологии есть свой допустимый вариант использования. Но как разработчику необходимо проанализировать технологию, а также ее плюсы и минусы, прежде чем принимать ее как есть. Одна из новейших технологий, которой в наши дни уделяется много внимания, — это Tailwind CSS. Когда […]
От автора: сегодня такое прекрасное время для написания CSS. Бывали у вас такие моменты, когда вы что-то кодируете и думаете про себя: «Я хочу, чтобы этот [текст, изображение, поле, вставьте элемент по вашему выбору здесь] увеличивался или уменьшался в зависимости от размера области просмотра … но только до определенного момента?». Если вы еще не испытали […]
От автора: в статье будут рассмотрены низкоуровневые API, которые подключаются к процессу стилей и макета движка рендеринга вашего браузера. Примечание. Исходный код демонстрации, обсуждаемой во второй половине этой статьи, можно найти на GitLab. Как я уже упоминал в своей недавней статье об анимации холста внутри компонентов React, мне нравится HTML-холст. Поэтому я был очень взволнован, […]
От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate. Итак, вместо того, чтобы связывать эти три функции […]
От автора: если вы когда-либо пытались поместить липкий элемент в макет сетки и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы, возможно, замечали, что position: sticky с CSS Grid не работает. Не стоит волноваться! Вполне возможно совместить эти два макета для работы вместе. Все, что вам, вероятно, понадобится, это еще одна строка CSS. Проблема […]
От автора: при создании макета в CSS важно учитывать и тестировать краткий и длинный текстовый контент. Четкое представление о том, что делать, если текст различается по длине, может предотвратить множество нежелательных проблем. Есть много ситуаций, когда добавление или удаление одного слова может изменить внешний вид дизайна или, что еще хуже, сломать его и сделать недоступным. […]
От автора: CSS-трансформации в интернете появились вместе с CSS-анимациями и CSS-переходами для добавления визуальных эффектов и движения в Интернете. Эти технологии были основным продуктом веб-платформы и инструментария веб-разработчиков более десяти лет. Фактически, свойство CSS transform впервые появилось в Safari еще в июле 2008 года, когда появилась iPhone OS 2.0. Вы можете найти некоторые архивные публикации […]
От автора: когда вы применяете свойство CSS к элементу, происходит множество вещей, невидимых на первый взгляд. Например, допустим, у нас есть такой HTML: [crayon-5ffd568eb6235798115921/] А потом мы пишем CSS … [crayon-5ffd568eb623b232158236/] Технически это не один стиль, который мы применяем, когда пишем одну строку CSS выше. Фактически, здесь к элементам .child будет применен целый набор свойств, […]
От автора: на днях у меня было уникальное задание: создать макет с элементами на всю ширину, при этом один элемент должен оставаться наверху. Это оказалось довольно сложно осуществить, поэтому я документирую данный случай, если кому-то понадобится воссоздать тот же эффект. Часть хитрости была связана с логическим позиционированием на маленьких экранах. Идея состоит в том, чтобы […]
От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями. Но липкое позиционирование […]
От автора: существует множество учебных пособий и руководств, которые обучают CSS-grid в целом, и я писал об этом несколько раз. Однако я заметил, что существует неправильное понимание функции minmax(), поскольку большинство статей являются общими или не содержат достаточного объяснения и реальных примеров использования. minmax() очень мощный и полезный инструмент. По этой конкретной причине я подумал, […]
От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности». Добавление соответствующей «Темной темы» в приложение некоторое время ожидало своей очереди, и, увидев […]
От автора: термин «Адаптивная верстка» часто подразумевает под собой проверку браузера в области просмотра на разной ширине и различных по размерам устройств. Мы всегда тестируем браузер по горизонтали, уменьшая ширину, но я редко встречал какие-либо соображения по поводу тестирования по вертикали за счет уменьшения высоты окна браузера. В глубине души возникает вопрос: нужно ли нам […]
От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента. Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже: Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже. Селектор :focus-within + псевдоэлементы ::before + абсолютное […]
От автора: каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть. Теперь, несмотря на то, что CSS не является языком программирования (разберитесь с этим), его все еще так характеризуют. […]
От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так? Некоторые примеры макетов из Grid by Example Рэйчел Эндрю […]
От автора: в целом, в веб-разработке есть реальная проблема с честностью и рациональным мышлением. Есть много педантичной чепухи, которая продвигается как хорошая практика, полностью основанная на сфабрикованных «истинах», которые очень далеки от реальности. Одним из таких больших заблуждений является идея о том, что «универсальный селектор» — одиночная звездочка — медленный, сбивающий с толку, трудный для […]
От автора: CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw. Этот метод полезен, когда ваша цель — создать привлекательный дизайн для […]
От автора: копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время. Одна из новых функций — новая функция image(). Она даст нам больше контроля над загрузкой изображений в CSS. Давайте рассмотрим возможности совершенно […]
От автора: узнайте, как управлять размером элементов, поддерживать правильный интервал и реализовывать гибкую типографику с помощью этих хорошо поддерживаемых функций CSS. Поскольку адаптивный дизайн развивается и становится все более детализированным, сам CSS постоянно развивается и предоставляет авторам больший контроль. Функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из последних […]
От автора: одна из наиболее важных функций веб-сайта, созданного с учетом специальных возможностей — это возможность перемещаться по нему с помощью клавиатуры. Большинство слепых пользователей и многие пользователи с ограниченными двигательными возможностями полагаются на навигацию с помощью клавиатуры, будь то стандартная клавиатура или устройство, имитирующее функционал клавиатуры. Поэтому необходимо обеспечить четкие визуальные индикаторы, выделяющие элемент, […]
От автора: когда-то существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было трудно сделать правильно: Макет Святого Грааля. Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и float, и ни один из них не подходил для этой задачи. Технически […]
От автора: переменные CSS (также известные как пользовательские свойства) поддерживаются в веб-браузерах почти четыре года. Мне нравится использовать их в зависимости от проекта и ситуации. Они очень полезны и просты в использовании, но часто фронтенд-разработчик может неправильно их использовать или неправильно понимать. Основная цель этой статьи заключается в том, что я хотел создать место, где […]
От автора: исторически HTML-формы были довольно сложными — во-первых, потому что требовалось хотя бы немного JavaScript, а во-вторых, потому что никакое количество CSS не могло заставить их работать. Однако это не обязательно верно в случае современного веб, поэтому давайте узнаем, как размечать формы, используя только HTML и CSS. Базовая структура Начните с элемента form. Здесь […]
От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3. Хотя, к сожалению, такие проблемы распространены среди тех, […]
От автора: в этом руководстве показано, как определять сетки CSS на странице, инспектировать их и устранять проблемы с макетом в панели Элементы Chrome DevTools. Откройте для себя CSS-сетки Когда к HTML-элемент на странице применено display: grid или display: inline-grid, вы можете увидеть значок grid рядом с ним в панели Элементы. Щелкните значок, чтобы переключить отображение […]
От автора: давайте посмотрим, как с помощью CSS сделать слой полупрозрачного фона, не затрагивая текст. Допустим, у вас есть изображение, подобное этому крабу, и вы хотите разместить его в пользовательском интерфейсе под текстом. [crayon-5facf780d5550297842517/] Но если вы просто поместите изображение позади текста, текст может быть трудночитаемым, поэтому вам также нужно добавить более темное полупрозрачное наложение […]
От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта […]
От автора: как фронт-энд разработчик, вы сталкивались с множеством ошибок CSS, которые могут помешать пользователю завершить или успешно выполнить свою задачу. Ошибка CSS может быть визуальной или технической, и оба этих типа могут повлиять на взаимодействие с пользователем. Иногда вы торопитесь и у вас нет времени на полную отладку и исправление ошибки, поэтому вы работаете […]
Свежие комментарии