Сатирические зарисовки на тему CSS, или Cюрпризы фронтенд-разработки

Рассказывает Исаак Лиман, программист и музыкант

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

Хм, эта страница почти идеальна. Ты только отцентрируй эту иконку по вертикали, окей? Я сказал боссу, что мы выкатим её врелиз через 5 минут.

У таких повёрнутых на CSS, как я, подобные фразы вызывают рефлективный нервный смешок. Знаете, такой смешок, который можно услышать от рассказывающего о том, как его отшила девушка или как он разбил свою машину. В те стародавние времена — до Grid, до Flexbox, до того, как «компьютерные науки» переименовали в «поиск на Stack Overflow» — вертикальное центрирование отсутствовало в резюме CSS. Пытаться сделать это — всё равно что, будучи Джеймсом Бондом, просить сухой мартини в Шоколаднице: если вы будете очень настойчивы, вам подадут нечто похожее внешне, но абсолютно разочаровывающее на вкус.

Да, было несколько людей, которые могли сходу выдать 5–6 строк сомнительного кода, способных решить эту проблему. Прочитав эти строки наоборот, можно было бы с лёгкостью призвать демона. Да и люди, которые их запоминали, явно были одержимы — этакие веганы в мире Web 1.0. На самом деле они не были знатоками веб-разработки, но, чёрт побери, они знали, как разместить элемент точно посередине между верхней и нижней границами <div>! К тому времени, когда их ответы на Stack Overflow устарели, очков репутации им с лихвой хватало для ухода на раннюю пенсию. Их дома в Сиэтле (первичный бульон, из которого развилась Кремниевая долина) остались нетронутыми, специально для будущих поколений. Вы можете взглянуть, как они жили. Кухонные столы ровно по пояс, картины висят ровно по центру стен, лейки для душа установлены ровно посередине и дают одинаковый напор как вверх, так и вниз.

Так или иначе, история CSS богата разочаровывающими и нелепыми решениями самых простых задач фронтенд-разработки и заумными однострочными реализациями никому не нужных фич. (Вы когда-нибудь слышали о mix-blend-mode? Вот именно.) За несколько лет практики я не раз сталкивался со всем этим. Ниже я приведу список самых больших сюрпризов, которые CSS может преподнести начинающему веб-разработчику, и расскажу, как к ним подготовиться.

Вертикальное центрирование — это сложно

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

Сейчас всё стало гораздо проще. Если вы пользуетесь Flexbox, то знаете, что эту проблему можно решить одной командой, align-items или justify-content (в зависимости от направления главной оси).

Вы, должно быть думаете: «Но есть же свойство vertical-align, что оно делает?» Да ничего, за исключением HTML-таблиц. Не слышали о них? И хорошо, всё равно использовать их сейчас — моветон. Вас просто не поймут коллеги. Почему? Потому что, как и «Иванушки International», они были слишком популярны в 90-е и уже всем надоели.

Некоторые утверждают, что vertical-align работает со строчными элементами. Врут и не краснеют, не верьте им.

100% от чего?

Вы наверняка думаете, что если вы установите свойство элемента width в 100%, то он займёт всё доступное по горизонтали место в родительском элементе. Извините, новички, это не всегда так.

Во-первых, это не работает со строчными элементами (например, <span> и <i>) и некоторыми элементами таблиц. Во-вторых, это не работает, если ширина родительского элемента не задана явно — да-да, вместе с Flexbox использовать такой приём не выйдет. И в-третьих, отступы применяются после вычисленной ширины, так что если у элемента есть margin-left, он будет выпирать, как живот у тёти Мардж.

Просто помните: вам не придётся использовать процентные соотношения, если вы будете писать очень маленькие сайты.

С float вы на плаву не продержитесь

Вот вам хитрая задачка:

Есть три брата. Первый позиционируется при помощи float: left, второй — при помощи float: right, третий — float: left. 
1. Последний — выровнен с остальными по горизонтали и расположен третьим? 2. Расположен на следующей строке после первых двух слева?3. Расположен на следующей строке после первых двух справа?

Подумайте пару минут. Откройте любимый редактор кода, проверьте на практике.

Как вы могли выяснить, правильный вариант ответа — «4. Правильный ответ не указан». Последний <div> располагается справа от первого. Да-да, CSS просто проигнорирует указанный порядок HTML-элементов и сделает всё по-своему. Вот что гласит на этот счёт спецификация:

CSS наплевать на ваши причуды. На ваши мечты. На ваши глупые понимания пространства, времени и смысла жизни. Открыть для себя CSS — значит открыть пространство, необременённое прогрессом, вселенную без моральных принципов, в которой ваша тщательно продуманная разметка— всего лишь крик в бесконечную пустоту. […] Нигде величие хаоса не будет более очевидным, чем во взаимодействии таких свойств, как float, clear и display. Вы можете произнести их имена. Вы можете — тщетно — пытаться пробудить их силы. Но берегитесь, ведь вы не сможете их контролировать. Да будет так.

Нельзя просто взять и понять решение проблемы

Каждый матёрый веб-разработчик знает, что CSS не реализован согласно жестким, предсказуемым правилам. Если бы всё было так просто, мы бы просто выучили их и жили долго и счастливо. Но, скорее всего, в основе этого языка стилей лежит заумный алгоритм сложности O(N logN), который гарантирует, что вероятность успеха решения задачи коррелирует лишь с количеством затраченного на поиск этого решения времени. Например, нет никаких конкретных правил по использованию white-space: nowrap, но многочисленные исследования показывают, что это свойство с большей вероятностью заработает на пятом часу отладки, чем на первом. И даже не пытайтесь обхитрить CSS: он знает, когда вы просто перебираете различные значения свойств display и position, и запустит счётчик лишь тогда, когда вы по-настоящему разочаруетесь в выборе профессии.

На своём карьерном пути вы можете встретить людей, которые величают себя «гуру CSS». Они мгновенно решают любые задачи и улыбаются, когда оттарабанивают заумные объяснения своих решений, используя при этом такие мистические фразы, как «контекст наложения» и «clearfix» — по слухам, это заклинания, призывающие демонов нижнего уровня из CSS-преисподней. Так вот, ничего сверхъестественного в таких людях нет. При помощи продолжительных медитаций и самобичевания они научились поглощать огромные количества разочарований для ускорения пресловутого алгоритма. Иными словами, они испытывают такое же количество злости и безысходности за пять минут отладки CSS, какое вы испытаете за пять часов. Наверняка при встрече они не улыбаются вам, ведь их лица сводит от напряжения. Скорее всего, они умрут от обширного инфаркта к 40 годам.

z-index — ненастоящее свойство CSS

Когда вы впервые столкнётесь с z-index, то подумаете: «Вау! Вот решение всех моих проблем!». Спустя три часа размышлений о том, почему ничего не работает, вы поймёте, что ошибались. Просто z-index — это не часть функциональности CSS. Это очень коварная шутка.

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

Я нахожу это мнение слишком оптимистичным. В ходе многовековой истории развития CSS ни один разработчик не проявил интереса к повышению его полезности и не прислушался к пользовательской базе. На мой взгляд, z-index — это бесконечный рикролл, пранк над каждым разработчиком, который пробует себя в дизайне веб-страниц. Я так и вижу создателей языка, спрашивающих у юных дарований: «А вы уже попробовали z-index?» — и убегающих в курилку к знакомым, чтобы посмеяться вместе с ними.

CSS — это не «каскадные таблицы стилей»

Да, это не опечатка. Слух о том, что CSS расшифровывается как «Cascading Style Sheets», был распущен достаточно скучной статьёй на The Onion, которую выложили на Hacker News, затем много раз правили и перевыпускали — до тех пор, пока оригинал не был забыт. Этот слух настолько прочно засел в умах сообщества, что даже профессиональные разработчики и докладчики конференций — а они-то должны знать правду — верили в него и повсюду его распространяли.

На самом деле CSS расшифровывается как «Ceaseless Screaming of the Sinner» — «непрестанный плач грешника». Вопреки распространённому мнению, CSS гораздо старше Интернета. На самом деле это побочный проект Иоганна Вольфганга фон Гёте, который возник во время написания «Фауста». Изначально поэт хотел встроить его в постановку в качестве драматичной системы наказания грешников в его вымышленном аду. Однако Гёте отказался от проекта, поскольку он оказался настолько мрачным и унылым, что ставил под угрозу всё произведение.

Все мы знаем, что Тим Бернерс-Ли создавал Интернет в большой спешке, потому что он хотел закончить проект до того, как проблема 2000 года и взрыв пузыря дот-комов уничтожат его. Ему не хватало времени для создания достойного механизма дизайна страниц, поэтому он схватил первый документ, который попался под руку — машинописную копию рукописей Гёте — и использовал описанную там систему. Единственное, что он поменял — перевёл названия каждого селектора и свойства с немецкого на английский. Если вы хотите увидеть то, с чего всё начиналось, взгляните на таблицы стилей сайта craigslist.org, который из-за использования неудачной комбинации запрещённых стилей в теге <body> теперь проклят вечно выглядеть, как список геометок городов планеты, на скорую руку набросанный аскетичным монахом.

CSS — это бушующая битва на дне бездны

Если вы подключитесь к работе над современным веб-проектом, который старше 6 месяцев, вы наверняка обнаружите легионы враждующих CSS-армий. Там будет пара таблиц на Bootstrap, ещё несколько на jQuery Mobile, сброс на чистом CSS, куча Angular-плагинов и сотни кастомных стилей. Могут ли они работать вместе, притом гармонично? Обратимся к следующей формуле для вычисления вероятности этого события:

p = ничего подобного

Все эти таблицы стилей борются между собой за каждый клочок DOM. Лишь благодаря отдельным исключительным селекторам и кувалде !important разработчики проекта могут следить за порядком. И каждый раз, когда они добавляют новый тег <a> или <span>, стили снова начинают яростную битву за color, font-size, padding и outline.

Если оставить эту битву без присмотра, могут возникнуть серьёзные последствия. Много раз я уходил с работы домой, наконец приведя страничку в должный вид, и на следующее утро, вернувшись, обнаруживал, что куда-то исчез целый <aside> (причём только в Internet Explorer, печально известном как первая программа, нарушающая все Женевские конвенции).

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

В CSS есть секретное меню

Вы когда-нибудь заказывали что-то из секретного меню в In-N-Out? Вы наверняка поняли, почему это меню держат под секретом — оно не очень хорошее. Например, если вы закажете картофель фри «Animal Style» (животный стиль), они буквально вытряхнут на него перхоть из маленького кролика прямо перед подачей. Тру стори.

В CSS тоже есть секретное меню, и оно тоже не блещет. Например, вы точно знакомы с этим:

			height: 17.4px;
height: 2em;
height: 50%;
		

И, возможно, даже слышали об этом:

			height: 25vh;
		

Кстати, это значение, как и z-index, является скорее злой шуткой, чем функциональным атрибутом. Но слышали ли вы об этих вариантах?

			height: unset;
height: inherit;
height: There standeth Minos horribly, and snarls; 
        examines the transgressions at the entrance; 
        judges, and sends according as he girds him. (The Inferno, Canto V);
/* Здесь ждет Минос, оскалив страшный рот;
   Допрос и суд свершает у порога
   И взмахами хвоста на муку шлет. (Ад, Песнь пятая)
Данте Алигьери. Божественная комедия, перевод М. Лозинского */
		

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

Надеюсь, эта статья поможет вам в решении проблем, с которыми вы столкнётесь при дизайне очередной веб-странички. Удачи!