🎨 CSS: почему интернет перестал быть серым и скучным
Кратко: CSS — это язык, который делает интернет красивым. Если HTML — это скелет страницы, то CSS — одежда, макияж и прическа. Цвета, шрифты, анимация, расположение блоков, адаптация под телефоны — всё это он. До появления CSS сайты напоминали научные статьи: текст, ссылки и никакого дизайна.
▫️Основные этапы развития: · 1994 г. — Хокон Виум Ли, работая в CERN с Тимом Бернерсом-Ли, предлагает идею стилей для HTML. Интернету нужна была хоть какая-то красота · 1996 г. — Первая версия CSS 1. Появляются цвета, шрифты, отступы, рамки. Браузеры внедряют поддержку со скрипом · 1998 г. — CSS 2 добавляет позиционирование (absolute, relative, float). Дизайнеры наконец могут верстать не только колонками · 2000–2010 гг. — Тёмные времена. Браузеры поддерживают CSS по-разному, верстальщики пьют валерьянку, изобретаются хакы для Internet Explorer 6 · 2011 г. — CSS 3 выходит модулями (а не монолитной версией). Появляются скругления (border-radius), тени, градиенты, анимации · 2015 г. — н.в. — Эра Flexbox и Grid. Верстать становится легко и приятно. Сайты наконец подстраиваются под любой экран · 2020–2026 гг. — CSS обзаводится контейнерными запросами, каскадными слоями, новыми цветовыми пространствами. Дизайнеры могут делать то, о чём раньше только мечтали
▫️Как устроен (максимально просто): · Селектор — говорим, к чему применять стили: h1 { } — ко всем заголовкам, .button { } — ко всем кнопкам с классом button · Свойство и значение — что именно меняем: color: red; — цвет текста красный, font-size: 16px; — размер шрифта · Каскад — стили наследуются и переопределяются в зависимости от порядка и специфичности · Блочная модель — каждый элемент — это блок с контентом, padding (внутренний отступ), border (граница) и margin (внешний отступ)
▫️Ключевые возможности современного CSS: · Flexbox — волшебная штука для раскладки элементов в ряд или колонку. Всё выравнивается само · Grid — двумерная сетка для сложных макетов. Можно строить настоящие архитектурные конструкции · Адаптивность — сайт сам подстраивается под телефон, планшет или 4К-монитор через медиазапросы · Анимации — плавные движения, появления, исчезновения без JavaScript · Переменные (custom properties) — можно задать цвета и отступы один раз и переиспользовать · :has() — «родительский селектор», о котором мечтали годы. Позволяет стилизовать родителя, если внутри есть определённый элемент
▫️Культурный феномен: · Бесконечные холивары: флексбокс против грида, пиксели против ремов, Bootstrap против Tailwind · “Покажи скилл” — умение нарисовать мяч одним дивом и 100500 строчек CSS · CSS-арт — картины, портреты и пейзажи, нарисованные на чистом CSS (да, это возможно) · Internet Explorer — главный враг верстальщика, ушедший в небытие в 2022 году. По нему не скучают · “Почему съехала вёрстка?” — фраза, от которой дёргается глаз любого фронтендера
▫️Современное положение: · CSS — живой и активно развивающийся язык. Новые возможности появляются каждый год · Фреймворки (Bootstrap, Tailwind) ускоряют разработку, но знать чистый CSS всё равно надо · Работает везде: от умных часов до телевизоров · Главный тренд — меньше кода, больше возможностей. Браузеры научились делать то, для чего раньше требовались библиотеки
