FPS расшифровывается как «кадры в секунду» (Frames Per Second) и означает измерение того, сколько кадров, или изображений, отображается на экране за одну секунду. Для frontend-разработчика эта метрика позволяет понять насколько интерфейс плавно и четко работает.
Привет, меня зовут Артур, и я люблю плавные интерфейсы, CSS и современные подходы. Сегодня хочу поговорить с вами о задаче, которая настигает, пожалуй, каждого фронтенд разработчика: о создании галереи.
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
:not();:has(), работающие по логике операторов ИЛИ и И;:has();user-select, кроме отмены выделения текста.Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
При создании гибких макетов главный фактор, который мы должны учитывать, — это ширина корневого элемента. Мы можем получить процентное измерение ширины, с помощью такой единицы как vw.
Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem. Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах.
Таким образом, мы хотим, чтобы при изменении ширины страницы или размера шрифта в настройках браузера автоматически менялись и размеры элементов, отступов и шрифтов.
Важно отметить, что изменение всех размеров нас интересует только в пределах минимальной и максимальной ширины макета.
▎Проблема
Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px. При максимальной ширине (1440px), размер шрифта должен быть 40px.
Для решения этой задачи мы можем использовать специальный онлайн калькулятор:
Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)
Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу
Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).
В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.
В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.
Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.
Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.
Дисклеймер: хотел создать скромный пост, а не статью, но не справился с управлением новым редактором. А старый редактор не поддерживает посты.
Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Привет! Меня зовут Евгений Шишков, я CPO конструктора рассылок EmailMaker. И я давно сталкиваюсь с одной и той же проблемой: и для мобильных, и десктопов тёмная тема уже стала классикой. Но когда дело доходит до отдельных приложений, любители этого режима рискуют выжечь себе глаза, и почтовые клиенты тут — не исключение. И даже если сам клиент тёмную тему поддерживает — далеко не факт, что письма в ней тоже будут тёмными. Одни просто отобразятся светлыми, другие криво адаптируются и от этого становятся нечитаемыми.
Есть пара способов, как адаптировать свои письма под dark mode и перестать светить ими, как паяльной лампой, в глаза получателям. Ниже расскажу, как популярные клиенты ведут себя в тёмном режиме, во что превращают ваши входящие и как на это можно повлиять при помощи нюансов вёрстки и кода — пригодится, если вы хоть раз сталкивались с созданием писем или шаблонов для них.
На протяжении многих лет сообщество веб-разработчиков накапливало знания об оптимизации производительности веб-приложений. Хотя каждая отдельная оптимизация может привести к улучшению работы сайта, совместное применение всех методов является довольно сложной задачей. Кроме того, лишь некоторые из них применимы к какому-либо конкретному сайту.
Вопросы производительности могут быть не столь очевидны для тех, чья карьера не была связана с этой областью. Именно поэтому важно понимать, какие оптимизации способны наиболее существенно повлиять на это. На реализацию всех рекомендаций скорее всего просто не будет времени, поэтому важно задать себе вопрос: какие оптимизации принесут максимальную выгоду пользователям?
Привет, Хабр! На связи Никита Никоноров, фронтенд-разработчик в МТС Диджитал. Недавно мы уже делились подборкой фреймворков для фронтендеров — сегодня продолжу тему.
Эта подборка ориентирована на начинающих разработчиков, но и опытные коллеги, надеюсь, смогут найти что-то полезное для себя. Как обычно, делитесь любимыми инструментами и лайфхаками в комментариях — всегда интересно узнать, чем пользуются другие. Начнем!
За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвастаюсь. Не было вопроса, на который я не ответил.
Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.
У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.
Сегодня я дам ответ на следующий вопрос: «Какие знаешь псевдо-классы?».
Привет! Меня зовут Даша, я фронтенд-разработчик отдела спецпроектов в KTS.
В нашем отделе мы часто занимаемся разработкой ярких и креативных проектов, которые содержат в себе анимации. Сегодня хочу поделиться нашим опытом, рассказать про несколько способов создания анимаций и показать, в каких случаях они подходят лучше всего.
Для каждой из перечисленных технологий я буду приводить пример использования анимации в реальном проекте.
Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту.
Всем прекрасного времени суток. Это первая часть из серии двух статей про перенос стилизации с SCSS'а на чистый CSS.
Сегодня мы с вами посмотрим каким образом можно преобразовать миксины SCSS'а на CSS с атомарными классами. Как я уже писал в прошлой статье, я работаю в достаточно молодой компании уровня стартапа, поэтому мы сами открываем методы оптимизации и некоторые особенности CSS'а.
Итак начнём.
В процессе разработки UI для игр Forza Horizon 3 и Forza Motorsport 7 я имел возможность поработать с потрясающими акриловыми матовыми элементами дизайна.
Вдохновлённый этим дизайном, я захотел создать похожий эффект при помощи HTML. В этом посте я расскажу о своих попытках создания красивого эффекта стекла, а также представлю пример кода и ассетов для тех, кто захочет попробовать реализовать эту методику самостоятельно.
Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Только я немного заскучал. Мне хочется повеселиться и отвести душу. В общем, я придумал новый формат статей в виде квиза.
Сразу скажу, что вопросы в нём только отчасти имеют практический смысл. На практике навряд ли вы столкнётесь с ними. Но это так задумано! Я специально хочу сделать всё, чтобы вы не ответили на вопросы! Поэтому, пожалуйста, не воспринимайте квиз серьёзно. Просто весело проведём время.
Конечно, я оставлю своё решение для каждого вопроса. Будет классно, если вы тоже добавите своё в комментариях. Я тоже хочу учиться. Давайте вместе увидим, каким может быть CSS.
Так, вы готовы? Давайте посмотрим, что я вам подготовил.
