Від автора: якщо ви вже під front-end розробці хоча б пару років, ви, швидше за все, вже використовували CSS-хакі. Однак якщо ви ще новачок, ви могли чути цей термін, але до кінця не розумієте його значення. У цій статті я поясню, що таке CSS-хак, і як ним користуватися. Але спочатку я поясню, чому вирішив написати цю статтю.
Розробники неправильно розуміють значення терміна
Як багато з вас чули, нещодавно на сайті SitePoint були опубліковані результати великого опитування по CSS, а я узагальнив їх в окремій статті. Одним із питань було: Під які з наступних браузерів від Microsoft ви пишіть CSS-хакі?
Коли я перший раз обробив результати опитування, я пропустив маленьку неточність у відповідях до цього питання, однак David Storey, інженер з Microsoft, який брав участь у створенні їх нового браузера, звернув на це увагу. Проголосувало 1 418 осіб, а результати були наступні:
IE9 – 62%
IE10 – 61%
IE11 – 57%
Edge – 45%
IE8 – 35%
IE7 – 9%
IE6 – 3%
IE5.5 – 1%
Результати невтішні: погано, що більше 60% розробників пишуть CSS-хакі для IE9 і IE10. Але Edge отримав 45%? Для Edge є деякі опубліковані хакі, але їх ще немає на сайті Browserhacks. Дуже незвично, що стільки людей використовують хакі для цього браузера. Виникає серйозне питання: З якими такими проблемами візуалізації CSS стикаються розробники Edge, що їм доводиться вдаватися до хакама?
Спочатку я подумав, що люди плутають хакі з функцією виявлення браузера. Але навіть це не пояснює такі високі цифри для Edge.
Потім я зрозумів, люди, мабуть, не до кінця зрозуміли питання; люди думають, що «CSS хакі для браузера Х» те ж саме, що «Підтримка браузера Х». Іншого логічного пояснення бути не може, особливо якщо врахувати великі відсотки у інших браузерів, яким не потрібні хакі.
Давайте всім тим, хто плутається у поняттях, дамо точне визначення, що таке хак.
Що таке CSS-хак?
Хак – це якийсь код у файлі CSS, стилі якого застосовуються тільки до зазначених браузерам, а іншими ігнорується. Розберемо приклад. Це CSS-хак:
* html .sidebar {
margin-left: 5px;
}
Код CSS вище (також відомий як хак «*-html ») застосувати тільки до браузера IE6 і нижче. Більшість розробників, що підтримують IE 6, не хвилюють більш ранні версії, так що можна вважати, що цей хак тільки для IE6.
Тут хак це символ зірочки, що стоїть перед «html». Це комбінація універсального покажчика та покажчика типу. Хтось виявив, що ці два селектора разом роблять так, що задані селектори працюють тільки в певних версіях IE, а іншими браузерами ігноруються. Т. е. лівий зовнішній відступ .sidebar в прикладі вище буде тільки в IE6 і нижче. CSS код написаний правильно, і повідомлень про помилку або попереджень ви не побачите (трохи нижче більш детально). Ось ще один приклад з сайту Browserhacks, на цей раз для IE11:
_:-ms-fullscreen, :root .selector {
margin-left: 5px;
}
Не буду вдаватися в деталі і пояснювати, чому код вище це хак (частково тому, що я сам повністю не впевнений, що правильно розумію), однак код вище працює лише в IE11. Насправді На сайті Browserhacks йдеться «IE11 і вище», так що можна припустити, що він працює і Edge. Але я цього не перевіряв. Важливо не, для яких браузерів написаний хак, а чи правильно ми розуміємо, що це таке.
Роблять CSS-хакі код невалидным?
Якщо у вас в коді є хакі, можливо, вам будуть вискакувати попередження та/або помилки, якщо ви проженете файл через W3C CSS-validator. Даний сервіс не скаже вам на 100%, чи є у вашому коді хакі чи ні.
Бувають випадки, коли в коді CSS є хакі, але помилок і попереджень немає. Наприклад, якщо ви використовуєте тільки *-html хак дляІЕ6, то ваш код спокійно пройде валидациюю.
Також деякі хакі (як хак для IE11, про який я говорив вище) використовують вендорные префікси (наприклад, :-ms-fullscreen). В такому випадку, якщо не змінювати налаштування в самому валидаторе, файл пройде перевірку, і сервіс покаже повідомлення:
Але якщо прокрутити до самого екрана валідатора, там буде попередження:
В даному випадку мене попереджають, що :-ms-fullscreen – «невідомий псевдоклас з вендорным префіксом». Якщо ви вважаєте попередження такого роду помилками, то в валидаторе можна відкрити вкладку «More Options» і зробити так, щоб ці попередження розпізнавалися як помилки:
В розділі «Vendor Extensions» в випадаючому списку виберіть «Errors», і тоді під час перевірки ваш файл не пройде валідацію, якщо в ньому містяться вендорные префікси або будь-який інший код для певних браузерів (необов’язково хакі). З іншого боку, ви цілком спокійно можете написати так:
.example {
margin-left: 5px\9;
}
Цей код працює в IE8 і нижче. Тут хак це зворотний слеш і дев’ятка (\9). В більшості браузерів взагалі вся рядок буде проігноровано через \9. Але з незрозумілих причин в IE8 і нижче така запис цілком собі нормально працює. В цьому прикладі в незалежності від налаштування валідатора, вискочить помилка, стилі не пройдуть валідацію:
Які методи можна назвати хакамі?
Методи і техніки нижче необов’язково можуть бути CSS-хакамі:
!important – не хак
CSS рядок !important на кінці взагалі не відноситься до цієї теми. Це валидная CSS запис, яка не направлена на роботу в якомусь конкретному браузері. Це не хак, але може розцінюватися як поганий стиль CSS.
Вендорные префікси не завжди є хакамі
Вендорные префікси націлені на конкретні браузери, але, зазвичай, їх не називають хаками. У більшій частині випадків при використанні вендорних префіксів також пишеться стандартизований код. Це не хак. В окремих випадках код з вендорными префіксами можна вважати хаком. Прикладом може послужити код вище _:-ms-fullscreen. Ще приклад це включення апаратного прискорення WebKit браузерах. Але все ж здебільшого вендорные префікси це окремий предмет. На сайті W3C є документація до коду з вендорными префіксами, в якій підтримується ідея того, що такий код можна розглядати як хак.
Селектори високій специфічності – не хакі
Якщо ви піднімаєте специфічність селекторів, щоб переписати якісь стилі, це не можна назвати хаком (наприклад, body .content #sidebar p). Це поганий стиль CSS, але не хак.
Старий синтаксис також не є хаком
Хороший приклад – складний код Flexbox для підтримки старих браузерів. Крім того, що на сьогоднішній день такий код неактуальне, я б не став називати це хаком. На той момент, коли браузери підтримували стару запис селекторів, код був повністю валідним. Ефект від цього коду точно такий же, як від хака, але я не думаю, що це одне і те ж.
А є умовні коментарі хаком?
Умовні коментарі, з допомогою яких можна писати CSS або навіть HTML код під конкретні версії IE, займають невизначене становище. Написаний певним чином HTML код повністю валідний, але все одно саму запис можна віднести до хакама.
У 2008 році Paul Irish популяризував те, що ми називаємо умовними класами, які, я впевнений, багато хто з нас использовли. Умовні класи задавалися в умовних коментарях і ставали доступними лише в певних версіях IE, тобто можна було використати валідний CSS-код в певних версіях IE.
Є умовні коментарі CSS-хаком? Я б відповів так, навіть просто тому, що вони виконують ту саму задачу, що і звичайні CSS-хакі.
Варто користуватися CSS-хакамі?
Як і з іншими питаннями у сфері веб-розробки, тут не можна точно відповісти. Правильніше буде сказати в залежності від випадку. Прихильники чистоти коду будуть говорити, що хакі краще не використовувати. Але найчастіше все не так просто. Я раджу:
Докладайте максимум зусиль до написання валідного, стандартизованого і кроссбраузерного CSS коду без хаків в рамках бюджету і відведеного часу на проект.
Якщо ви випробували всі можливі варіанти, або вам не вистачає часу або бюджету на правильне виправлення коду, користуйтеся хаками.
При написанні хаків користуйтеся порадами Harry Roberts, щоб, коли у вас з’явиться час або гроші ви могли з легкістю викинути або отрефакторить код.
Завжди коментуйте хакі і рефакторьте код при першій можливості.
У підсумку
Якщо з цієї статті вам нічого не запам’яталося, тоді запам’ятайте всього одне речення: CSS-хакі застосовують код до одного або декількох версіях браузера, інші браузери ігноруються. Це просте визначення CSS-хака. Якщо ви підтримуєте Microsoft Edge в CSS, це ще не означає, що для цього потрібно писати хакі; підтримка це зовсім інша тема.
У цій статті можна не погодитися з деякими твердженнями, однак я вважаю, що велика частина розробників, які розуміють, що таке хак, погодяться з узагальненням вище.
