Статьи с тегом «CSS»
FrontendCSS ::selection — это круто, но использование селекторов типа :nth-child(5n+2) — это гораздо интереснее.FrontendCSSJavaScripta11y Демонстрация того, как современная веб-платформа может упростить уменьшение движения на старой кодовой базе.FrontendCSS Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения.FrontendCSS Нужен ли currentColor? Не совсем, лучше использовать CSS переменные. Однако он всё равно имеет свою ценность, и об этом стоит поговорить..FrontendCSS Браузеры начинают внедрять изменения в стили UA по умолчанию для вложенных заголовков разделов. Разработчикам следует убедиться, что их сайты не используют стили UA в определённых случаях, во избежание непредвиденных результатов и ошибок в проверках Lighthouse. Рассмотрим, что представляют собой эти изменения, как определить, есть ли проблема на ваших страницах, и дадим несколько советов по обеспечению соответствия и улучшению структуры сайтов.FrontendCSS Используйте возможности CSS3 с селектором :root, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн.FrontendCSS Недавно появился повод воспользоваться новым псевдоклассом CSS :is(), и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов.FrontendCSS Синие ссылки с подчёркиванием — хороший стиль по умолчанию для ссылок в основном тексте, но он выглядит чересчур резко. Возможно, мы можем его немного смягчить и сделать более гибким.FrontendCSS Глубокое погружение в матрицу CSS трансформаций, её взаимосвязь с отдельными свойствами CSS трансформаций, взгляд на скрытые возможности форм функций.FrontendCSS При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции.FrontendCSS CSS функция attr() позволяет извлечь значение атрибута выбранного HTML элемента и использовать его в качестве значения CSS свойства.FrontendCSS & — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.FrontendCSS А вы уже использовали @counter-style? Этот инструмент способен существенно облегчить работу со списками и маркерами.FrontendCSS Импортирование CSS в каскадный слой. Условный импорт CSS с помощью запросов @supports и медиа запросов. @import vs <link>FrontendCSS Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.FrontendCSS Наконец, можно центрировать/выравнивать по центу содержимое блочных макетов, не прибегая к flexbox гимнастикеFrontendCSS Определение поддержки возможностей CSS и обеспечение интеллектуального отката с помощью @supportsFrontendCSS Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.FrontendCSS CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобитсяFrontendCSS Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.FrontendHTMLCSS Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.FrontendCSSHTML SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.FrontendCSS CSS постоянно развивается — недавно у него появился новый логотип, и за последний год было выпущено множество новых функций, не получивших должного внимания. Мы говорим о таких вещах, как возможность центрировать div, не сходя с ума, более лёгкая работа с темным режимом, анимация скрытых элементов или использование CSS для решения математических задач. Кажется, что теперь можно делать больше с меньшими хлопотами, так что давайте рассмотрим некоторые из новых возможностей CSS, появившихся в последнее время.FrontendCSSa11y CSS переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях.FrontendCSSHTMLJavaScripta11y За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный
подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.FrontendHTMLCSSJavaScripta11y Давайте уделим немного времени рассмотрению Dialog API, Popover API и остальных. Рассмотрим, когда лучше использовать каждый из них в зависимости от требований. Модальные или немодальные? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы разберёмся во всём этом.FrontendCSS Анимация веерное раскрытие
подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания
. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.FrontendCSS Victor Ayomipo экспериментирует с CSS функцией min(), исследуя её гибкость с помощью различных единиц измерения, чтобы определить, является ли она абсолютной гарантией отзывчивости. Узнайте, какие предостережения он делает против догматических подходов к веб-дизайну, основываясь на своих выводах.FrontendCSS Используйте margin, избегая переполнения и горизонтальных полос прокрутки с width: stretchFrontendCSS Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации.FrontendCSS Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.FrontendCSS Рабочая группа CSS выпустила первый публичный рабочий проект CSS Values and Units Module Level 5. В нем описаны общие значения и единицы измерения, принимаемые свойствами CSS, и синтаксис, используемый для них, а также добавлено несколько интересных новых функций.FrontendCSS В наши дни градиентный текст довольно легко сделать с помощью background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.FrontendCSS Можно ограничить распространение background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.FrontendCSS Современный CSS даёт множество новых, простых способов решения старых проблем, но часто новые функции не только решают старые проблемы, но и открывают новые возможности.FrontendCSS CSS Containment используется для оптимизации и открытия возможностей стилизации путём изоляции элементов от остальной части страницы. Различные значения contain (size, paint, layout и т. д.) обеспечивают различные преимущества и компромиссы.FrontendCSS Поддержка синтаксиса относительного цвета в CSS теперь повсеместна (вперёд, к взаимодействию!), поэтому рассмотрим некоторые базовые (и всё ещё очень полезные) варианты использования, например, применение альфы к цвету, который у вас есть под рукой.FrontendCSS Пишите более безопасный CSS, используя @property, позволяющий определять типы для пользовательских свойств. Узнайте, почему традиционные запасные значения могут не сработать и как функции @property повышают устойчивость определений пользовательских свойств.FrontendCSS Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться!FrontendHTMLCSSJavaScript Диалоговые окна — неотъемлемая часть любого пользовательского интерфейса, будь то веб-интерфейс, мобильный или любой другой, существующий на сегодня.FrontendCSS Ознакомьтесь с поведением, о котором следует знать, как браузер вычисляет окончательные значения пользовательских свойств. Непонимание этого процесса может привести к неожиданному или отсутствующему значению, а также к трудностям с поиском и устранением проблемы.FrontendHTMLCSSJavaScript В последнее время браузеры стремительно обретают довольно важные возможности. Возможности, для реализации которых могло потребоваться несколько библиотек JavaScript (или CSS), теперь доступны в браузерах из коробки
.FrontendCSS Понимание CSS свойства display и его значений важно для создания правильно организованных и привлекательных сайтов.FrontendCSS Коллекция простых однострочных CSS решений для добавления небольших улучшений на любую веб-страницу.FrontendCSS Наследование в CSS — это действительно суперспособность, и именно оно превращает разработку в Интернете в удовольствие, если вы принимаете его. В этой небольшой статье я собираюсь обратить вас в супер фанатов.FrontendCSS Каскад и специфичность, которых часто боятся разработчики, на самом деле очень просты, если использовать правильную модель мышления при создании CSS.FrontendCSS Часто упускаемое из виду CSS свойство mask-image может быть простым способом привнести немного индивидуальности в вашу работу над веб-дизайном.FrontendCSS В современной веб-разработке CSS сброс и нормализация — две важные техники, позволяющие добиться согласованности стилей в разных браузерах.FrontendCSS Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль.FrontendCSS Давайте рассмотрим использование CSS в качестве альтернативы JavaScript для создания простых таймеров. Используем современные свойства CSS, такие, как @property, @keyframes, и псевдоэлементы со значениями counter().FrontendHTMLCSS Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции.FrontendCSS Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.FrontendHTMLCSSJavaScript Якорные ссылки — простой способ создать навигацию по странице. Например, в оглавлении можно использовать якорные ссылки для перехода к различным разделам страницы.FrontendCSS Atomic CSS — новый подход к написанию CSS, позволяющий вместо работы с длинными именами классов и сложными селекторами использовать крошечные, одноцелевые, небольшие классы, о чём и пойдёт речь в статье.FrontendCSS Всякий раз, когда публикуется статья о Специфичности в CSS — и, как следствие, о самом Каскаде — я очень радуюсь, ведь это основная концепция языка, которую должен знать каждый. Чем больше статей об этом, тем лучше!FrontendCSS В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так, и в результате получится элемент, не соблюдающий aspect-ratio.FrontendHTMLCSSJavaScript Сегодня рассмотрим одну из моих любимых фич веб-компонентов: прогрессивное улучшение.FrontendCSS Сегодня мы рассмотрим некоторые из удивительных способов, с помощью которых CSS позволяет выбирать целевые элементы на странице.FrontendCSS Вчера мы выяснили, как работает Flexbox. Сегодня я хочу рассказать о его практическом применении.FrontendCSS Flexbox — способ создания гибких макетов, расположенных в виде столбцов или строк.FrontendCSS Вчера мы познакомились с основами CSS Grid. Сегодня узнаем, как создать универсальную систему сеток, позволяющую быстрее и проще создавать различные макеты сайтов.FrontendCSS Сегодня мы изучим основы CSS Grid — создания макета на основе Grid. Приступим!FrontendCSS В веб-разработке управление крупными CSS проектами сопряжено со значительными трудностями. Важность масштабируемого и поддерживаемого CSS невозможно переоценить для долгосрочного успеха проекта. В статье рассматривается архитектура Inverted Triangle CSS как решение этих проблем, а также даётся глубокое понимание, причины её использования, практические шаги по реализации и сравнение с другими методологиями.FrontendCSS Рассмотрим CSS свойство text-wrap и то, как с его помощью можно улучшить перенос текста на веб-странице.FrontendCSS Давайте поговорим о различных способах управления переноса текста на веб-странице. CSS даёт множество инструментов, позволяющих сделать текст таким, каким мы хотим его видеть. Также рассмотрим трюки с использованием HTML и специальных символов.FrontendCSSJavaScript Одно из преимуществ CSS переменных — хранение таких значений, как цвета, размеры и другие элементы дизайна, в одном месте, с последующим использованием их во всей таблице стилей. Мы расскажем о значении CSS переменных и о том, как упростить поддержку и обновление стилей, что позволит повысить навыки фронтенд-разработки.FrontendCSSSass CSS уже не тот, что в 1996 году, и SASS тоже вырос с момента своего создания — какому из них отдать предпочтение сегодня? Мы рассмотрим плюсы и минусы обоих вариантов.FrontendCSS Я создал несколько примеров сниппетов :has(), используемых в реальных клиентских проектах.FrontendCSS CSS — это основа, при помощи которой разработчики превращают HTML-документы в визуально привлекательные и функциональные для посетителей веб-сайты. Для фронтенд-разработчика понимание правил, регулирующих CSS, имеет решающее значение для повышения мастерства в оформлении веб-сайтов. В статье рассмотрим концепцию специфичности CSS, разберём её составляющие и покажем, как более глубокое понимание может улучшить навыки стилизации веб-сайтов.FrontendCSS В CSS есть константа infinity. Когда я впервые узнал об этом, мозг озарило множество абсурдных возможностей. Давайте обсудим! Возможно, найдутся и практические варианты использования.FrontendCSS С помощью новых CSS атрибутов полосу прокрутки можно стилизовать и скрывать, не влияя на возможность пользователя прокручивать страницу. Мы покажем, как скрыть полосу прокрутки в большинстве браузеров с помощью CSS.FrontendCSS Рассмотрим CSS-свойство field-sizing и то, как оно может улучшить удобство взаимодействия с веб формой.FrontendCSS "Именовать вещи сложно", — гласит аксиома программной инженерии, и CSS не является исключением. Здесь собраны некоторые соображения, связанные с именованием пользовательских свойств CSS. Я буду использовать термины "переменная" и "пользовательское свойство" как взаимозаменяемые, поскольку для целей определения того, как их называть, это фактически одно и то же.FrontendCSS Блочная модель/Box Model CSS — фундаментальная концепция, позволяющая размещать и выравнивать элементы на веб-странице. Владение блочной моделью необходимо для управления отступами, размерами, позиционированием и разработкой макета веб-страницы в целом.FrontendCSS Внедрение текучей типографики означает создание текста, адаптирующегося к различным размерам экрана. По мере совершенствования технологий продолжают появляться устройства различных форм и размеров. Как фронтенд-разработчик, вы должны создавать приложения, которые хорошо адаптируются к различным размерам экрана. Дизайн с использованием текучей типографики улучшает пользовательский опыт и доступность; в этой статье мы расскажем как это сделать.FrontendCSS Сегодня я хочу рассказать о том, как я подхожу к CSS-архитектуре в своих проектах. Давайте покопаемся!FrontendCSS Сегодня я хочу поговорить о бесклассовых и основанных на классах дизайн-системах CSS, бойлерплейтах и фреймворках: чем они отличаются, какой подход я предпочитаю и так далее.FrontendCSS В этой статье мы рассмотрим использование CSS свойства gap, позволяющее очень просто добавлять пространство между элементами и решающее ряд проблем с вёрсткой, беспокоивших разработчиков на протяжении многих лет.FrontendCSSa11y Состояние фокуса пользователя совершенно не учитывается веб-разработчиками. Представьте себе навигацию по сайту без чёткого указания того, где вы находитесь и с чем взаимодействуете; это сбивает с толку. Именно здесь на помощь приходят CSS-псевдоклассы, такие, как :focus, :focus-within и :focus-visible. Цель этой статьи — пролить свет на важность состояния фокуса в веб-разработке.FrontendCSS Мы переживаем некий ренессанс CSS: новые возможности, техники, эксперименты и идеи появляются в таком количестве, какого мы не видели со времён "CSS3". Легко почувствовать себя подавленным, когда, кажется, что твоя профессия развивается с бешеной скоростью, но Джефф Грэм (Geoff Graham) считает, что "современный" CSS в 2023 году фактически сделал CSS "проще" в написании.FrontendCSSa11y Иногда требуется, чтобы список отображался не вертикально, а в виде горизонтального списка (как в навигационном меню).FrontendCSS В Chrome 120 включена функция заглядывающей вперёд вложенности.FrontendCSS Выберите оптимизированный перенос текста, для красоты, а не для скорости.FrontendCSSa11y Оптимизация и настройка под пользователей, предпочитающих непрозрачный пользовательский интерфейс.FrontendCSS CSS — постоянно развивающийся язык. С каждой итерацией он становится все лучше и лучше. Поэтому важно следить за новейшими возможностями CSS, чтобы использовать их в своих проектах и меньше зависеть от библиотек сторонних разработчиков.FrontendCSS Для frontend-разработчика одним из самых утомительных занятий является определение свойств текстовых элементов для различных размеров экрана с помощью медиа-запроса, что приводит к созданию большого файла css. В этой статье мы расскажем как сделать тексты на сайте отзывчивыми без использования медиа-запроса, тем самым сэкономив время и место.FrontendCSS Каскадная таблица стилей (CSS) — это мощный язык стилей, помогающий фронтенд разработчикам оформлять обычные веб-страницы. Однако при использовании этого языка стилей можно допустить ряд ошибок мешающих писать эффективный код. В данной статье рассматриваются некоторые распространённые ошибки и предлагается решение для каждой из них.FrontendCSSBEM Одним из наиболее распространённых и сложных вопросов, с которыми сталкиваются фронтенд-инженеры, являются соглашения об именовании CSS. С популярностью метода Блок Элемент Модификатор (БЭМ) многие привыкли организовывать свои стили по удобной схеме.FrontendCSS В Интернете существует множество способов переключения между светлыми и тёмными темами. Мы можем использовать JavaScript или медиазапрос prefers-color-scheme в CSS для переключения между темами на основе системных предпочтений пользователя.FrontendCSS Узнайте, как использовать @scope для выбора элементов только в ограниченном поддереве DOM.FrontendCSS Я написал A Modern CSS Reset почти 4 года назад, и, да, он не слишком хорошо сохранился. Несколько дней назад я заметил, что на него снова ссылаются, и подумал, что, вероятно, это хорошая идея — опубликовать обновлённую версию.FrontendCSS Соглашения об именовании CSS улучшают взаимодействие членов команды при работе над проектами, повышают сопровождаемость и масштабируемость проекта, позволяя разработчикам оптимизировать свои рабочие процессы. В этой статье мы погрузимся в мир соглашений об именовании CSS, покажем практические примеры и преимущества, которые они дают в процессе разработки.FrontendCSS CSS развивается быстрее, чем когда-либо. С учётом всех новых возможностей, которые появились — и ещё появятся — после появления Flexbox и Grid несколько лет назад, меняется и способ написания CSS. В этой статье Geoff Graham рассказывает о том, какие функции оказали наибольшее влияние на его нынешние подходы к CSS, а также о тех, которые не оказали (по крайней мере, пока).FrontendCSS Сдвиги макета CSS означают неожиданное перемещение (или сдвиг) элементов в макете веб-страницы в процессе рендеринга. Это происходит при изменении размеров или положения элементов, что приводит к перетеканию или смещению содержимого на странице. Сдвиги макета могут привести к ухудшению пользовательского интерфейса, так как перемещение может нарушить взаимодействие с пользователем или затруднить чтение, или доступ к содержимому.FrontendCSS Пользовательские свойства CSS, известные как переменные, — это мощная функция, позволяющая разработчикам определять многократно используемые значения в таблицах стилей. Использование пользовательских свойств позволяет значительно повысить удобство повторного использования и сопровождения кода, а также создавать динамические стили для своих веб-проектов. Цель данной статьи — всесторонне объяснить пользовательские свойства CSS и их применение с помощью функции var.FrontendJavaScriptCSSHTML В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд "страниц" с помощью HTML, CSS и обычного JavaScript.FrontendCSS Рефакторинг кодовой базы должен привести к аналогичной или повышенной производительности и улучшению состояния кодовой базы. В конце концов, если развёртывание обновлённой базы вызовет проблемы с загрузкой или производительностью, это приведёт к снижению трафика и доходов. К счастью, существует множество методов оптимизации, которые можно применить для решения потенциальных проблем с размером файлов и производительностью.FrontendCSS Логические свойства CSS — эффективный способ управления макетом веб-страниц. С течением времени CSS развивался в соответствии с требованиями современного веб-дизайна, и одним из значительных достижений последних лет стало появление логических свойств CSS. В этой статье мы познакомимся с логическими свойствами CSS, покажем, что они собой представляют, чем отличаются от традиционных (физических) свойств и почему они важны для создания гибких и отзывчивых макетов.FrontendCSS z-index — свойство, используемое для управления порядком расположения слоёв в документе. Элементы с большим значением z-index располагаются над элементами с меньшим значением. Подобно тому, как оси x и y на странице определяют расположение элементов по горизонтали и вертикали, z-index определяет, как они располагаются друг над другом по оси z.FrontendCSS В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.FrontendCSS Рефакторинг CSS — задача не из лёгких: его нужно провести так, чтобы не создать проблем. Сначала необходимо проанализировать существующую кодовую базу, провести аудит состояния CSS-кодовой базы, выявить слабые места, согласовать подход и убедить руководство в необходимости вложения времени и ресурсов в этот процесс.FrontendCSS Контейнерные запросы CSS — интересное дополнение к миру CSS. В этой статье мы дадим вам базовое представление о контейнерных запросах CSS и о том, как они работают.FrontendCSSSCSSSass Миксины SCSS обеспечивают эффективный способ повторного использования CSS-кода. Миксины уменьшают дублирование и улучшают структуру кода за счёт инкапсуляции стилей в блоки многократного использования. Благодаря возможности принимать аргументы, миксины становятся невероятно адаптивными и универсальными. В этой статье мы расскажем о том, как SCSS-миксины улучшают разработку фронтенда, способствуя модульности и согласованности кода, и упрощая написание CSS.FrontendCSS В этой статье мы рассмотрим несколько способов стилизации скроллбара в CSS, в разных браузерах, чтобы вы могли настроить скроллбар по умолчанию в соответствии с вашим брендом или дизайном.FrontendCSS Со свойствами фона CSS можно сделать очень многое. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также изучим варианты позиционирования фонового изображения с помощью background-position.FrontendCSS Бывают случаи, когда действительно необходимо поддерживать определённое соотношение между шириной и высотой отзывчивых элементов на веб-странице. Долгое время это можно было сделать с помощью различных CSS-трюков. Свойство CSS aspect-ratio изменило ситуацию: теперь мы можем задавать соотношение сторон элемента в одной строке кода. Давайте рассмотрим, как использовать свойство aspect-ratio.FrontendCSS В этой статье мы рассмотрим некоторые CSS трюки, которые позволят создать анимацию наведения для раскрытия наших изображений.FrontendCSSBEM Следование CSS методологии гарантирует, что все, кто участвует в процессе разработки, говорят на одном языке. БЭМ и SMACSS отличаются друг от друга, но имеют ряд уникальных преимуществ.FrontendCSSHTML В современном цифровом ландшафте подход, ориентированный на мобильные решения (mobile-first), приобрёл большое значение в веб-дизайне и разработке. Применяя подход mobile-first в HTML и CSS, вы отдаёте приоритет потребностям мобильных пользователей и обеспечиваете бесперебойную и увлекательную работу вашего сайта на небольших экранах. В этой статье мы расскажем о принципах и преимуществах mobile-first
дизайна и реализации конкретных стратегий в HTML и CSS, чтобы вы могли применить эту методику.FrontendCSS Мы изучим различные подходы к сокрытию элементов веб-страниц с помощью CSS и оценим их производительность.FrontendCSS В статье объясняется и демонстрируется, как использовать два CSS свойства, которые могут помочь при создании отзывчивых макетов — object-fit и object-position.FrontendCSS Предварительная фильтрация набора дочерних элементов перед применением c к ним логики An+B.FrontendCSS Одна из наших любимых функций CSS препроцессора теперь встроена в CSS: вложения правил стиля.FrontendCSS В этой статье я расскажу о том, как лучше всего использовать CSS медиа-запросы для достижения отзывчивости сайта.FrontendCSS В постоянно развивающемся мире веб-разработки, где CSS является ключевым элементом стиля, освоение техники рефакторинга CSS имеет решающее значение для создания эффективных и удобных в обслуживании таблиц стилей. Рефакторинг CSS позволяет оптимизировать код, устранить избыточность и повысить общее качество кода. Применение правильных техник может превратить запутанные таблицы стилей в хорошо организованный, модульный и легко обслуживаемый код. В этой статье мы расскажем вам о техниках рефакторинга CSS.FrontendCSS Контейнерные запросы позволяют стилизовать элементы в зависимости от доступного пространства. Они позволяют создавать устойчивые адаптивные компоненты.FrontendCSS Узнайте, как Flexbox и Grid позволяют создавать плавно реагирующие макетные сетки без медиа-запросов.FrontendCSSBEM Чистый и организованный код имеет решающее значение в современных веб-проектах, и разработчики постоянно ищут способы улучшить удобство сопровождения и организации кода. К счастью, для достижения этой цели существуют различные методы, включая популярную методологию Блок Элемент Модификатор (БЭМ), и в этой статье объясняется, как работает БЭМ и почему вы должны начать его применять.FrontendCSS Новые viewport единицы измерения — интригующая и мощная функция, которую рассматривают для включения в CSS, и эта статья поможет узнать о них и о том, как ими пользоваться.FrontendCSS Шпаргалка по CSS селекторам. С подсказками, как выбирать HTML элементы по классу, имени, атрибутам и списку дочерних селекторов.FrontendCSS В дополнение к математическим функциям CSS были добавлены тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2(). Эти функции определены в модуле Значения и единицы измерения CSS уровня 4
и доступны во всех браузерах.FrontendCSS Более детальный контроль над CSS трансформациями с помощью индивидуальных свойств трансформации элементов translate, rotate и scale.FrontendCSS CSS функция color-mix() появилась в Chrome 111. В этой статье объясняется, как использовать эту функцию для смешивания цветов в таблицах стилей.FrontendCSS В мире дизайна маскирование — популярная техника достижения уникальных дизайнерских эффектов. Как дизайнер, я использовал его много раз, но редко использую в Интернете. Думаю, причина, по которой я не использую CSS маски, заключается в поддержке браузеров. Они частично поддерживаются в браузерах blink (Chrome и Edge) и полностью поддерживаются в Safari и Firefox.FrontendCSSTailwind Tailwind CSS v3.3 уже здесь — он содержит множество новых функций, о которых люди давно просили, и множество новых вещей, о которых вы даже не подозревали.FrontendCSSa11y Рассмотрим, что такое em и rem, чем они отличаются, когда и как их использовать, и практические примеры использования.JavaScriptFrontendHTMLCSS Во второй части рассмотрим несколько примеров непосредственного использования веб-платформы в качестве альтернативы некоторым решениям, предлагаемым фреймворкамиCSSTailwindFrontend Я продемонстрирую 10 лучших функций, предлагаемых в Tailwind CSS v3.0, чтобы вы могли начать использовать их и улучшать свой опыт фронтэнд разработки.TailwindCSSFrontend В этом году было много шумихи вокруг популярного CSS фреймворка Tailwind. Хочу поделиться мыслями и опасениями по поводу UI этого фреймворка. У меня был небольшой опыт написания utility-first CSS кода, когда я начинал свою карьеру во фронтенде несколько лет назад.CSSFrontend Часто хочется, чтобы был способ избежать возникновения определённой проблемы или поведения CSS. Вы знаете, что контент динамический, и на веб-странице всё может измениться, что увеличивает вероятность возникновения проблемы с CSS или странного поведения.CSS Проект черновика рабочей группы CSS для Selectors Level 4 включает несколько селекторов псевдоклассов, которые уже поддерживаются в большинстве современных браузеров. В этом руководстве будут рассмотрены те из них, которые имеют наилучшую поддержку, а так же приведены примеры, демонстрирующие как вы можете их использовать уже сейчас.CSSFrontend Важно иметь постоянное соотношение ширины и высоты изображений и других отзывчивых элементов. Мы много лет использовали в CSS хак с отступами, но сейчас у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы его использовали и как это делать по-новому. Конечно, будут варианты использования с подходящими запасными вариантами.CSSFrontend В этой статье я хочу поделиться, тем что я делаю при CSS масштабировании элементов в DevTools браузера.CSSFrontend Мы не можем говорить о веб-разработке, не упоминая Отзывчивый Дизайн. В наши дни это просто данность, и так было уже много лет. Медиа запросы — часть отзывчивого дизайна, и они никуда не денутся. С момента появления медиа-запросов (буквально десятилетия назад) CSS эволюционировал до такой степени, что существует множество трюков, которые могут нам помочь существенно сократить количество медиа-запросов. В некоторых случая я покажу вам, как заменить несколько медиа-запросов только одним CSS объявлением. Эти подходы могут привести к уменьшению объёма кода, упрощению обслуживания и большей степени привязаны к имеющемуся контенту.CSSGridFrontend Если вы когда-нибудь пытались разместить прилипающий элемент в макетной сетке grid и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы могли прийти к выводу, что position: sticky не работает с CSS Grid.CSSFrontend Откройте возможности селекторов атрибутов CSS, их синтаксис и практическое применение, включая стилизацию по значению, состоянию и пользовательским атрибутам данных.CSSFrontend Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.CSSGuideFrontend Рассмотрим лучшие способы обработки цветов в CSS, несколько советов по их использованию в дизайн-системе и то, что можно ожидать от цветов в ближайшем будущем.FrontendCSSBEM При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований.