Как стать автором
Обновить
57.25

CSS *

Каскадные таблицы стилей

Сначала показывать
Порог рейтинга
Уровень сложности

CSS Custom Functions уже на подходе…

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров4K

Пользовательскую функцию можно рассматривать как расширенное пользовательское свойство, которое вместо замены одним фиксированным значением вычисляет значение замены на основе параметров функции и значений пользовательских свойств в момент ее вызова.

Читать далее

Новости

Контент-менеджмент в ЮMoney: на стыке фронтенда, дизайна и тестирования (и котиков)

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.5K

Привет, меня зовут Влада, я и жнец, и швец, и на дуде игрец веб-специалист в ЮMoney. О своей должности и о том, почему контент-менеджмент — это не только наполнение сайта текстами и картинками, я расскажу в своей первой статье для Хабра. А также поделюсь, зачем контентщику SQL и CSS (а ещё JS, HTML, XML, Markdown и многое другое). Поехали!

Читать далее

CSS в 2025: какие фишки теперь доступны?

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров12K


Привет, Хабр.


В начале января 2025 года мне захотелось посмотреть, какие новые фишки CSS стали поддерживаться современными браузерами за прошлый год. Провести некий срез, что уже можно использовать. И тут меня посетила мысль: «А почему бы не поделиться новинками на Хабре?». Вот я и пришёл.


Сразу скажу, что эта статья — краткий обзор появившимся возможностей. Моя цель — уведомить вас. Я не буду закапываться в принцип работы и другие нюансы. По этой причине, пожалуйста, воспринимайте эту статью как список, что можно изучить в 2025 году.


Для составления списка я использовал сайт «Can I Use». Брал те новшества, которые стали «зелёными» в 2024 году. Смотрел последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Browser.


Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.

Читать дальше →

Две строки CSS, которые снизили производительность со 120 до 40 FPS

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров22K

FPS расшифровывается как «кадры в секунду» (Frames Per Second) и означает измерение того, сколько кадров, или изображений, отображается на экране за одну секунду. Для frontend-разработчика эта метрика позволяет понять насколько интерфейс плавно и четко работает.

Читать далее

Истории

Пишем идеальную mobile-first галерею

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.1K

Привет, меня зовут Артур, и я люблю плавные интерфейсы, CSS и современные подходы. Сегодня хочу поговорить с вами о задаче, которая настигает, пожалуй, каждого фронтенд разработчика: о создании галереи.

Читать далее

Неизвестно полезный CSS. Часть 7

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров6K


Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.


Сегодня мы рассмотрим:

  • что вы можете не знать про псевдо-класс :not();
  • примеры работы псевдо-класса :has(), работающие по логике операторов ИЛИ и И;
  • как неожиданно может повыситься специфичность правила при использовании псевдо-класса :has();
  • чем полезно свойство user-select, кроме отмены выделения текста.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →

Гибкие макеты: Решаем проблему на корню

Время на прочтение3 мин
Количество просмотров1K

При создании гибких макетов главный фактор, который мы должны учитывать, — это ширина корневого элемента. Мы можем получить процентное измерение ширины, с помощью такой единицы как vw.

Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem. Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах.

Таким образом, мы хотим, чтобы при изменении ширины страницы или размера шрифта в настройках браузера автоматически менялись и размеры элементов, отступов и шрифтов.

Важно отметить, что изменение всех размеров нас интересует только в пределах минимальной и максимальной ширины макета.

Проблема

Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px.  При максимальной ширине (1440px), размер шрифта должен быть 40px. 

Для решения этой задачи мы можем использовать специальный онлайн калькулятор:

Min-Max-Value Interpolation

Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)

Читать далее

Современные способы переключения контента

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров3.7K



Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу

Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).

Читать дальше →

CSS Grid Layout: Асимметричная резиновая сетка

Время на прочтение2 мин
Количество просмотров10K

В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.

Читать далее

Модули CSS раскладки — что такое и как готовить

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров5.2K

В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.

Читать далее

Интеграция CSS-фреймворков в Angular: советы, которые вы не знали

Уровень сложностиСредний
Время на прочтение52 мин
Количество просмотров2K

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.

Читать далее

Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.4K

Дисклеймер: хотел создать скромный пост, а не статью, но не справился с управлением новым редактором. А старый редактор не поддерживает посты.


Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).


image

Читать дальше →

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 11

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров2.8K


Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Читать дальше →

Ближайшие события

Как перестать выжигать людям глаза своими письмами: настраиваем тёмную тему для рассылок

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров988

Привет! Меня зовут Евгений Шишков, я CPO конструктора рассылок EmailMaker. И я давно сталкиваюсь с одной и той же проблемой: и для мобильных, и десктопов тёмная тема уже стала классикой. Но когда дело доходит до отдельных приложений, любители этого режима рискуют выжечь себе глаза, и почтовые клиенты тут — не исключение. И даже если сам клиент тёмную тему поддерживает — далеко не факт, что письма в ней тоже будут тёмными. Одни просто отобразятся светлыми, другие криво адаптируются и от этого становятся нечитаемыми.

Есть пара способов, как адаптировать свои письма под dark mode и перестать светить ими, как паяльной лампой, в глаза получателям. Ниже расскажу, как популярные клиенты ведут себя в тёмном режиме, во что превращают ваши входящие и как на это можно повлиять при помощи нюансов вёрстки и кода — пригодится, если вы хоть раз сталкивались с созданием писем или шаблонов для них.

Читать далее

Наиболее эффективные методы улучшения Core Web Vitals

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров1.7K


На протяжении многих лет сообщество веб-разработчиков накапливало знания об оптимизации производительности веб-приложений. Хотя каждая отдельная оптимизация может привести к улучшению работы сайта, совместное применение всех методов является довольно сложной задачей. Кроме того, лишь некоторые из них применимы к какому-либо конкретному сайту.


Вопросы производительности могут быть не столь очевидны для тех, чья карьера не была связана с этой областью. Именно поэтому важно понимать, какие оптимизации способны наиболее существенно повлиять на это. На реализацию всех рекомендаций скорее всего просто не будет времени, поэтому важно задать себе вопрос: какие оптимизации принесут максимальную выгоду пользователям?

Читать дальше →

Всего несколько строк CSS для плавных переходов между страницами

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров11K

Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.
Читать дальше →

5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года. Часть 2

Время на прочтение5 мин
Количество просмотров4.6K

Привет, Хабр! На связи Никита Никоноров, фронтенд-разработчик в МТС Диджитал. Недавно мы уже делились подборкой фреймворков для фронтендеров — сегодня продолжу тему.

Эта подборка ориентирована на начинающих разработчиков, но и опытные коллеги, надеюсь, смогут найти что-то полезное для себя. Как обычно, делитесь любимыми инструментами и лайфхаками в комментариях — всегда интересно узнать, чем пользуются другие. Начнем!

Читать далее

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров7.2K


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


Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.


У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.


Сегодня я дам ответ на следующий вопрос: «Какие знаешь псевдо-классы?».

Читать дальше →

Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции

Уровень сложностиСредний
Время на прочтение25 мин
Количество просмотров5.3K

Привет! Меня зовут Даша, я фронтенд-разработчик отдела спецпроектов в KTS.

В нашем отделе мы часто занимаемся разработкой ярких и креативных проектов, которые содержат в себе анимации. Сегодня хочу поделиться нашим опытом, рассказать про несколько способов создания анимаций и показать, в каких случаях они подходят лучше всего.

Для каждой из перечисленных технологий я буду приводить пример использования анимации в реальном проекте.

Читать далее

Выкинь свой RoadMap: что на самом деле нужно знать начинающему фронтендеру

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5K

Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту.

Читать далее
1
23 ...

Вклад авторов