[Перевод] Пришло время попрощаться с единицей измерения px

Если вы занимаетесь дизайном сайтов или их разработкой — не используйте абсолютные единицы измерения. А именно — px, in, mm, cm, pt и pc. Это, в дизайне, так же плохо в плане доступности и отзывчивости контента, как использование таблиц в сфере создания макетов страниц. Если взглянуть на все...

[Перевод] Практика использования спецификации CSS Scroll Snap

Часто ли у вас возникало желание воспользоваться какой-нибудь возможностью CSS, позволяющей, без лишних усилий, создать элемент-контейнер, поддерживающий прокрутку? CSS, что очень хорошо, даёт нам такую возможность. Я, когда только начинал заниматься фронтенд-разработкой, пользовался для создания...

[Перевод] CSS: о выводе коротких и длинных текстов

Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко...

[Перевод] Подробности об использовании CSS-функции minmax() в Grid-макетах

Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Я и сам немало об этом писал. Но я обратил внимание на то, что у многих разработчиков возникают сложности с использованием CSS-функции minmax(). Пожалуй,...

[Перевод] Таблицы и CSS-свойство float в современной веб-разработке

Больше двадцати лет тому назад таблицы были основным HTML-средством для оформления веб-страниц. Таблицы давали веб-мастерам стабильный механизм для создания сайтов, имеющих некие признаки «дизайна». Содержимое страниц больше не должно было идти строго сверху вниз. Материалы можно было размещать в...

[Перевод] Отзывчивый веб-дизайн и учёт высоты окна браузера

Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом,...

[Перевод] Выбор CSS макета — Grid или Flexbox?

Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли. В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5...

[Перевод] CSS-переменные

CSS-переменные (их ещё называют «пользовательскими свойствами») поддерживаются веб-браузерами уже почти четыре года. Я пользуюсь ими там, где они могут пригодиться. Это зависит от проекта, над которым я работаю, и от конкретных задач, которые мне приходится решать. Работать с CSS-переменными...

[Перевод] Готовимся к собеседованию по фронтенду: 15 вопросов

Автор статьи, перевод которой мы сегодня публикуем, приводит 15 вопросов, которые задавали на собеседованиях ему, и которые он задавал соискателям на должности фронтенд-разработчиков сам. Читать дальше →...

[Перевод] Проектирование заголовочных частей сайтов с использованием CSS Flexbox

Когда я, изучив основы HTML и CSS в 2014 году, занялся разработкой сайтов, сложнее и страшнее всего для меня было создание их заголовочных частей. Тогда технология Flexbox была ещё достаточно новой, поэтому мы вынуждены были использовать старые методы — вроде float-позиционирования и техники...

[Перевод] Исправление странной ошибки и стратегии отладки, проверенные временем

Помните, когда вам в последний раз доводилось сталкиваться с ошибкой, связанной с пользовательским интерфейсом, на исправление которой у вас уходили многие часы? Возможно, эта ошибка происходила периодически, без каких-то видимых причин. Может быть, она появлялась при определённых условиях (это...

[Перевод] Исследование CSS-свойства flex

Вам когда-нибудь было интересно узнать о том, как работает сокращённое CSS-свойство flex? Оно позволяет задавать значения свойств flex-grow, flex-shrink и flex-basis. Я обратил внимание на то, что данное свойство чаще всего используют в виде flex: 1, что позволяет flex-элементу растягиваться,...

Архив сайта

Реклама на сайте