Эти CSS-техники устарели

Привет, Хабр! Общаясь с коллегами, я заметил, что они незнакомы с последними возможностями CSS. Как обычно, у всех свои причины. У кого-то много повседневной рутины. Кому-то в принципе неинтересно, что нового происходит в CSS. А кто-то по привычке использует подходы десятилетней давности и ему норм. Как фанату CSS, мне грустно. Сколько же прикольных вещей проходит мимо них. Да и их код может быть меньше, надёжнее и проще для понимания. В общем, я собрал несколько фрагментов кода, которые были популярны давным-давно, и переписал их с помощью новых возможностей CSS. Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/917204/

#ruvds_статьи #css #верстка_сайтов

Эти CSS-техники устарели

Привет, Хабр! Общаясь с коллегами, я заметил, что они незнакомы с последними возможностями CSS. Как обычно, у всех свои причины. У кого-то много повседневной рутины. Кому-то в принципе неинтересно, что нового происходит в CSS. А кто-то по привычке использует подходы десятилетней давности и ему норм. Как фанату CSS, мне грустно. Сколько же прикольных вещей проходит мимо них. Да и их код может быть меньше, надёжнее и проще для понимания. В общем, я собрал несколько фрагментов кода, которые были популярны давным-давно, и переписал их с помощью новых возможностей CSS. Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/917204/

#ruvds_статьи #css #верстка_сайтов

BEM vs Atomic CSS или картинка по номерам

Доброго времени суток. На днях читая очередную статью о том, как повысить свою эффективность в верстке и расширить кругозор возможностей, я задумался, а что сейчас в тренде? Как вы уже поняли, я начал добывать информацию о подходах. Как итог, моему изумлению не было предела, когда я понял, что за много лет почти ничего не поменялось. Для начала предлагаю разобраться, о чем статья. В данной статье я попытался свести все свои знания касающиеся использования CSS и подходов (методологий) организации CSS-кода (селекторов) и нюансов использования того или иного подхода, а также провести сравнительный анализ. Как говорил Юрий Гагарин - Поехали!

https://habr.com/ru/articles/901628/

#bem #atomic_css #верстка_сайтов

Как улучшить доступность сайтов с помощью семантического HTML: стандарты семантики

Привет, Хабр. Меня зовут Дмитрий, я Frontend-разработчик в компании Webest. В этой статье расскажу, как эффективно использовать семантический HTML, какие теги (от <header> и <main> до <article> и <aside>) действительно приносят пользу, и в каких ситуациях они работают лучше всего. Вы узнаете, как правильно выстраивать иерархию заголовков, делать удобную навигацию, создавать доступные формы и даже подключать субтитры к видео. Мы посмотрим на конкретные примеры и разберём, почему семантика — это не просто «опция», а настоящий фундамент для успешного и доступного сайта.

https://habr.com/ru/articles/892516/

#верстка_сайтов #html #семантическая_верстка

«Безумный» CSS квиз от гика

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Только я немного заскучал. Мне хочется повеселиться и отвести душу. В общем, я придумал новый формат статей в виде квиза. Сразу скажу, что вопросы в нём только отчасти имеют практический смысл. На практике навряд ли вы столкнётесь с ними. Но это так задумано! Я специально хочу сделать всё, чтобы вы не ответили на вопросы! Поэтому, пожалуйста, не воспринимайте квиз серьёзно. Просто весело проведём время. Конечно, я оставлю своё решение для каждого вопроса. Будет классно, если вы тоже добавите своё в комментариях. Я тоже хочу учиться. Давайте вместе увидим, каким может быть CSS. Так, вы готовы? Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/859826/

#css #гриды #селекторы #свойства #вопросы_и_ответы #ruvds_статьи #верстка_сайтов

Как нарисовать квадрат 3 × 3 см на веб-странице*

* Не привлекая внимания санитаров Меня зовут Илья, я занимаюсь фронтенд-разработкой вот уже 10 лет. Представьте, что вам нужно сделать стили для печати документов, а бегать к принтеру с линейкой, чтобы убедиться в корректности фактических размеров отдельных элементов, очень не хочется. Было бы куда проще иметь возможность приложить ту же линейку к экрану. Но размеры элементов на экране почти всегда не соответствуют их физическим размерам при печати. Казалось бы, зачем это вообще может быть кому-то нужно. Но это бывает важно. Например, в типографиях. Как вы уже догадались, работаю я не в типографии, поэтому с подобной проблемой не сталкивался. Но в свободное время интересуюсь необычными задачами из мира веб-разработки, так сказать, расширяю кругозор. И вот однажды я услышал тезис, что добиться точного воспроизведения реальных размеров на экране невозможно. Что ж, вызов был брошен. И я поставил себе задачу (вы же тоже сами ставите себе задачи?) — нарисовать красивый красный квадратик размером 3 × 3 см. Тому, что у меня в итоге получилось, и посвящён мой необычный рассказ.

https://habr.com/ru/companies/yandex/articles/847000/

#яндекс #css #верстка_сайтов #интерфейсы #типография #вебдизайн

Как стать Верстальщиком

В 2022 году, когда ситуация на рынке труда была не самой благоприятной, я решил кардинально изменить свою карьеру и стать верстальщиком. Несмотря на то, что сейчас 2024 год, многие аспекты моего пути остаются актуальными и могут помочь тем, кто хочет войти в IT.

https://habr.com/ru/articles/828320/

#верстальщик #вёрстка #верстка_сайтов #обучение #обучение_программированию #образование #первые_шаги #курс #курсы_программирования #курсы

Адаптив без боли: как сделать резиновую вёрстку с заботой обо всех разрешениях

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp() . Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:

https://habr.com/ru/articles/819565/

#адаптивная_вёрстка #отзывчивый_вебдизайн #упрощение_подхода #верстка_сайтов #вебразработа #резиновая_верстка #rem #scss #html #css