Що таке css хакі
Розробники неправильно розуміють значення терміна
Коли я перший раз обробив результати опитування, я пропустив маленьку неточність у відповідях до цього питання, однак David Storey, інженер з Microsoft, який брав участь у створенні їх нового браузера, звернув на це увагу. Проголосувало 1 418 осіб, а результати були наступні:
Спочатку я подумав, що люди плутають хакі з функцією виявлення браузера. Але навіть це не пояснює такі високі цифри для Edge.
Потім я зрозумів, люди, мабуть, не до кінця зрозуміли питання; люди думають, що «CSS хакі для браузера Х» те ж саме, що «Підтримка браузера Х». Іншого логічного пояснення бути не може, особливо якщо врахувати великі відсотки у інших браузерів, яким не потрібні хакі.
Давайте всім тим, хто плутається в поняттях, дамо точне визначення, що таке хак.
Що таке CSS-хак?
Хак - це якийсь код у файлі CSS, стилі якого застосовуються тільки до вказаних браузерам, а іншими ігнорується. Розберемо приклад. Це CSS-хак:
Код CSS вище (також відомий як хак «* -html») таким чином, застосовується тільки до браузеру IE6 і нижче. Більшість розробників, що підтримують IE 6, не хвилюють більш ранні версії, так що можна вважати, що цей хак тільки для IE6.
Тут хак це символ зірочки, що стоїть перед «html». Це комбінація універсального селектора і селектора типу. Хтось виявив, що ці два селектора разом роблять так, що задані селектори працюють тільки в певних версіях IE, а іншими браузерами ігноруються. Тобто лівий зовнішній відступ у .sidebar в прикладі вище буде тільки в IE6 і нижче. CSS код написаний правильно, і повідомлень про помилку або попереджень ви не побачите (трохи нижче більш докладно). Ось ще один приклад з сайту Browserhacks, на цей раз для IE11:
Не буду вдаватися в деталі і пояснювати, чому код вище це хак (почасти тому що я сам повністю не впевнений, що правильно це розумію), проте код вище працює тільки в IE11. Насправді на сайті Browserhacks то кажуть «IE11 і вище», так що можна припустити, що він працює і в Edge. Але я цього не перевіряв. Важливо не, для яких браузерів написаний хак, а чи правильно ми розуміємо, що це таке.
Чи роблять CSS-хакі код невалідним?
Якщо у вас в коді є хакі, можливо, вам будуть вискакувати попередження і / або помилки, якщо ви виженете файл через W3C CSS validator. Даний сервіс не скаже вам на 100%, чи є в вашому коді хакі чи ні.
Бувають випадки, коли в CSS коді є хакі, але помилок і попереджень немає. Наприклад, якщо ви використовуєте тільки * -html хак дляIE6, то ваш код спокійно пройде валідацію.
Також деякі хакі (як хак для IE11, про який я говорив вище) використовують Вендорний префікси (наприклад. -ms-fullscreen). У такому випадку, якщо не змінювати налаштування в самому валідаторі, файл пройде перевірку, і сервіс покаже повідомлення:
Але якщо прокрутити до самого екрана валідатора, там буде попередження:
В даному випадку мене попереджають, що: -ms-fullscreen - «невідомий псевдоклас з Вендорний префіксом». Якщо ви вважаєте попередження такого роду помилками, то в валідаторі можна відкрити вкладку «More Options» і зробити так, щоб дані попередження розпізнавалися як помилки:
У розділі «Vendor Extensions» в випадаючому списку виберіть «Errors», і тоді під час перевірки ваш файл не пройде валідацію, якщо в ньому містяться Вендорний префікси або будь-який інший код для певних браузерів (необов'язково хакі). З іншого боку, ви цілком спокійно можете написати так:
Цей код працює в IE8 і нижче. Тут хак це зворотний слеш і дев'ятка (\ 9). У більшості браузерів взагалі вся рядок буде проігнорована через \ 9. Але з незрозумілих причин в IE8 і нижче такий запис цілком собі нормально працює. У цьому прикладі в незалежності від настройки валідатора, вискочить помилка, стилі не пройдуть валідацію:
Які методи можна назвати Хакамі?
Методи і техніки нижче необов'язково можуть бути CSS-Хакамі:
!important - НЕ хак
CSS рядок з! Important на кінці взагалі не належить до цієї теми. Це валідна CSS запис, яка не спрямована на роботу в якомусь конкретному браузері. Це не хак, але може розцінюватися як поганий стиль в CSS.
Вендорний префікси не завжди є Хакамі
Вендорний префікси націлені на конкретні браузери, але, зазвичай, їх не називають Хакамі. У більшій частині випадків при використанні Вендорний префіксів також пишеться стандартизований код. Це не хак. В окремих випадках код з Вендорний префіксами можна вважати хаком. Прикладом може послужити код вище _: - ms-fullscreen. Ще приклад це включення апаратного прискорення в WebKit браузерах. Але все ж здебільшого Вендорний префікси це окремий предмет. На сайті W3C є документація до коду з Вендорний префіксами, в якій підтримується ідея того, що такий код не можна розглядати як хак.
Селектори високу специфічність - НЕ хакі
Якщо ви піднімаєте специфічність селектор, щоб переписати якісь стилі, це не можна назвати хаком (наприклад, body .content #sidebar p). Це поганий стиль CSS, але не хак.
Старий синтаксис також не є хаком
Хороший приклад - складний код Flexbox для підтримки старих браузерів. Крім того, що на сьогоднішній день такий код неактуальний, я б не став називати це хаком. На той момент, коли браузери підтримували стару запис селектор, код був повністю дійсним. Ефект від цього коду точно такий же, як від хака, але я не думаю, що це одне і те ж.
Чи варто користуватися CSS-Хакамі?
Як і з іншими питаннями у сфері веб-розробки, тут не можна точно відповісти. Правильніше буде сказати в залежності від випадку. Прихильники чистоти коду будуть говорити, що хакі краще не використовувати. Але найчастіше все не так просто. Я раджу:
Докладайте максимальних зусиль до написання валидного, стандартизованого і кросбраузерності CSS коду без хаков в рамках бюджету і відведеного часу на проект.
Якщо ви випробували всі можливі варіанти, або вам не вистачає часу або бюджету на правильне виправлення коду, користуйтеся Хакамі.
При написанні хаков користуйтеся порадами Harry Roberts, щоб, коли у вас з'явиться час або гроші ви могли з легкістю викинути або отрефакторіть код.
Якщо з даної статті вам нічого не запам'яталося, тоді запам'ятайте лише одне речення: CSS-хакі застосовують код до одного або кількома версіями браузера, інші браузери ігноруються. Це просте визначення CSS-хака. Якщо ви підтримуєте Microsoft Edge в CSS, це ще не означає, що для цього потрібно писати хакі; підтримка це зовсім інша тема.
У цій статті можна не погодитися з деякими твердженнями, проте я вважаю, що велика частина розробників, які розуміють, що таке хак, погодяться з узагальненням вище.
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
