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


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

У будь-якому товаристві є ритуал посвячення, який повинен пройти кожен новачок, перш ніж зможе дійсно вважатися своєю людиною. У товаристві фронтендерів це виглядає приблизно так:

Гм, ця сторінка майже ідеальна. Ти тільки відцентруй цю іконку по вертикалі, окей? Я сказав босові, що ми викотимо її в реліз через 5 хвилин.

У таких помішаних на CSS, як я, подібні фрази викликають рефлективний нервовий смішок. Знаєте, такий смішок, який можна почути від того, що розповідає про те, як його відшила дівчина або як він розбив свою машину. У ті стародавні часи – до Grid, до Flexbox, до того, як “комп’ютерні науки” перейменували у “пошук на Stack Overflow” – вертикальне центрування було відсутнє в резюме CSS. Намагатися зробити це – все одно що, будучи Джеймсом Бондом, просити сухе мартіні в Шоколадниці: якщо ви будете дуже наполегливі, вам подадуть щось схоже зовні, але що абсолютно розчаровує на смак.

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

Вертикальне центрування – це складно

Як я і сказав, вертикальне центрування раніше було повним безглуздям. Треба було помістити елемент, що вирівнюється, у батьківський на висоті в 50%, дати йому верхній відступ в 50%, а потім заповнити спеціальну декларацію. Ах так, іноді це працювало тимчасово, і через декілька днів доводилося повторювати все спочатку.

Зараз все стало набагато простіше. Якщо ви користуєтеся Flexbox, то знаєте, що цю проблему можна розв’язати однією командою, align - items чи justify - content (залежно від напряму головної осі).

Ви напевно думаєте: “Але є ж властивість vertical - align, що вона робить”? Та нічого, за винятком HTML- таблиць. Не чули про них? І добре, все одно використати їх зараз – моветон. Вас просто не зрозуміють колеги. Чому? Тому що вони були занадто популярні в 90-і і вже усім набридли.

Деякі стверджують, що vertical - align працює з рядковими елементами. Брешуть і не червоніють, не вірте їм.

100% від чого?

Ви напевно думаєте, що якщо ви встановите властивість елементу width у 100%, то він займе усе доступне по горизонталі місце у батьківському елементі. Даруйте, новачки, це не завжди так.

По-перше, це не працює з рядковими елементами (наприклад, і ) і деякими елементами таблиць. По-друге, це не працює, якщо ширина батьківського елементу не задана явно – так-так, разом з Flexbox використати такий прийом не вийде. І по-третє, відступи застосовуються після вичисленої ширини, так що якщо у елементу є margin - left, він випинатиме, як живіт у тітки Мардж.

Просто пам’ятайте: вам не доведеться використати процентні співвідношення, якщо ви писатимете дуже маленькі сайти.

З float ви на плаву не протримаєтеся

Ось вам хитра задачка:

Є три брати

Перший позиціонується при допомозі float: left, другий – при допомозі float: right, третій – float: left. Останній:

  1. Вирівняний з іншими по горизонталі і розташований третім?
  2. Розташований на наступному рядку після перших двох ліворуч?
  3. Розташований на наступному рядку після перших двох справа?

Подумайте кілька хвилин. Відкрийте улюблений редактор коду, перевірте на практиці.

Як ви могли з’ясувати, правильний варіант відповіді – “4. Правильна відповідь не вказана”. Останній

розташовується праворуч від першого. Так-так, 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 набагато старше за Інтернет. Насправді це побічний проект Йоганна Вольфганга фон Гете, який виник під час написання “Фауста”. Спочатку поет хотів вбудувати його в постановку в якості драматичної системи покарання грішників в його вигаданому пеклі. Проте Гете відмовився від проекту, оскільки він виявився настільки похмурим і сумовитим, що ставив під загрозу увесь твір.

CSS – це бурхлива битва на дні безодні

Якщо ви підключитеся до роботи над сучасним веб-проектом, якому більше 6 місяців, ви напевно виявите легіони ворогуючих CSS-армій. Там буде кілька таблиць на Bootstrap, ще декілька на jQuery Mobile, скидання на чистому CSS, купа Angular-плагінів і сотні кастомних стилів. Чи можуть вони працювати разом, притому гармонійно? Звернемося до наступної формули для обчислення вірогідності цієї події:

p = ніфіга подібного

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

Якщо залишити цю битву без нагляду, можуть виникнути серйозні наслідки. Багато разів я йшов з роботи додому, нарешті привівши сторіночку в належний вид, і на наступний ранок, повернувшись, виявляв, що кудись зник цілий<aside>

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *