Css reset або normalize

Одним із прикладів були стилі списку за замовчуванням, де спочатку в браузерних таблицях стилів за замовчуванням Internet Explorer'а і Opera був відступ списку margin-left: 30pt ;, тоді як Firefox і KHTML йшли з padding-left: 40px ;. Якщо вам хотілося змінити відступ за замовчуванням, визначивши ul, то в браузерах це призводило до дуже різних результатів.

Скидання ВИХІДНИХ НАСТРОЕК CSS

Щоб домогтися невеликої стабільності, деякі розробники скидаю все поля і відступи за допомогою універсального селектора:

Визначивши відступ списку і почавши з цього свою таблицю стилів, ви отримаєте те, що очікували. Однак застосування * означало, що поле і відступ за замовчуванням «гримнув» для всіх елементів і, як тільки ви додавали елемент form, ставало зовсім тяжко.

Він робить скидання деяких властивостей багатьох (але не всіх) елементів до еквівалента простого тексту. Так як скидаються тільки відповідні елементи, таким чином обходяться деякі проблеми *. Потім ми можемо визначати стилі для цих скинутих «обесстіленних» властивостей, будучи впевненими в тому, що будуємо на стабільній кросбраузерності основі. Таке призначення стилів, крім того, діє як сигналізатор потреби в усвідомленої установці відповідних стилів для цих елементів.

ПРОБЛЕМИ СКИДАННЯ НАЛАШТУВАНЬ CSS

Скиди CSS були справжнім порятунком, але зараз, особливо за умови підвищення каркасів-фреймів, вони часто використовуються «як є». Наприклад, Ерік припускав, що інші розробники почнуть будувати сайти на запропонованих ним стилях скидання, відповідним чином скасовуючи їх, і в першу версію Meyer Reset тимчасово включалося це правило:

На жаль, на ділі не все визначали стилі фокуса, і з другої версії Ерік його видалив.

Застосовуючи скиди, відчуваєш себе трохи збоченцем. Скидання стилів браузера за замовчуванням змушує міркувати про те, як буде видно кожен елемент, допомагаючи переконатися, що елементи застосовуються по семантиці, а не стилям за замовчуванням. Але для елементів на зразок i і em майже завжди є стиль браузера за замовчуванням. Інші браузерні стилі за замовчуванням, такі, як був колись сміховинно великим розмір тексту заголовків, змінилися і за замовчуванням стали досить стерпними. Проблеми починаються, коли хтось хоче після передачі застосувати скинутий елемент HTML тільки з призначеними «обесстіленнимі» стилями скидання.

Для мене найважливішою проблемою скидів є успадкування, що веде до спаму в браузерних інструментах. При спробі відстежити в чужому коді проблему CSS глибоко вкладеного елемента це не допоможе:

Css reset або normalize

Правила скидання CSS, повторювані через успадкування

NORMALIZE.CSS

Ніколас Галлахер (Nicolas Gallagher) і Джонатан Ніл (Jonathan Neal) зробили інший підхід за допомогою Normalize.css. «Маленького файлу CSS, що гарантує кращу кросбраузерності послідовність в стилях за замовчуванням елементів HTML». Як і у випадку зі скидами CSS, він дає нам надійну кросбраузерності стартову точку - в першу чергу основну причину застосування скидання - але два цих підходу різняться з філософської точки зору.

«Обесстіленний» елемент невпорядкованого списку

Css reset або normalize

Застосовуємо Meyer Reset

Застосовуємо Normalize.css v1

Applying Normalize.css v2

Явно видно різницю в філософії, коли приклад Meyer Reset з'являється як пара рядків простого тексту без полів, відступу або маркерів, тоді як приклади Normalize.css схожі на стилі за замовчуванням. Різниця в стилях, застосованих до цього ul, теж легко помітна.

Однак це не всі стилі, застосовані до ul. Для порівняння ось вам той же самий «обесстіленний» скріншот, але з видимими стилями агента користувача, в Firefox 21 і Opera Next 15:

Css reset або normalize

Стилі агента користувача Mozilla

Стилі агента користувача Opera

Це той CSS, який ми скидаємо або нормалізуємо.

Normalize.css версії 2 підтримує сучасні браузери плюс IE 8, тоді як версія 1, крім того, містить додаткову підтримку застарілих браузерів на зразок IE 6 і 7. Цим старішим браузерам потрібно більше нормалізації, і тут можуть позначитися незначні недоліки - наприклад, додані вертикальні поля для вкладеного списку на вищенаведеному прикладі-скріншоті Normalize.css v1. Поділ на дві версії зручно, якщо вам більше не потрібно на вищому рівні забезпечувати підтримку старих браузерів, а також якщо хочете дізнатися все про їх примхах.

Normalize.css також допомагає виправити деякі браузерні дефекти, включаючи «інтерфейс для налаштування елементів HTML5, правку font-size попередньо тексту фіксованої, переповнення SVG в IE9 і безліч дефектів, пов'язаних з формами, в браузерах і операційних системах». Наприклад, наступний CSS виправляє проблеми WebKit за допомогою нового елемента HTML5 input type = "search»:

Без нього застосування за замовчуванням WebKit'ом -webkit-appearance: searchfield; fortype = "search» перешкоджає призначенню стилів шрифту, відступу, рамки і властивостей фону в OS X і iOS, а також викликає глючне поведінку властивості border в Windows.

ВИСНОВОК

Сильно відрізняється з точки зору філософії від таких скидів CSS, як Meyer Reset, Normalize.css багато в чому слід тієї ж традиції, йдучи по стопах Тантека і Еріка. Можливо, ви вже використовуєте його - він є частиною ядра HTML5 Boilerplate. Bootstrap і нового Pure YUI.

Всі таблиці стилів агента користувача прагнуть до одного і, сподіваюся, одного разу нам не доведеться більше робити скидання або нормалізацію. Є навіть обгрунтований аргумент перестати хвилюватися про невеликі відмінності між браузерами. А поки, якщо ви застосовуєте скидання CSS або зовсім нічого не використовуєте, в наступному своєму проекті дайте шанс Normalize.css.

ДОДАТКИ

1. Помітно, що таблиці стилів агента користувача для Mozilla. WebKit і IE. CSS2.1 Таблиця стилів за замовчуванням агента користувача висувають на передній план відмінності між (старими) браузерами. Ці стилі також включають такі штуки, як style - спробуйте додати в свій CSS style і подивіться, що з цього вийде.

2. З тих пір всі браузери дійшли до установки відступу реєстру, padding-left або padding-start, при цьому IE7 - останній браузер IE, що застосовує для цього margin-left.

Постскриптум. Так як «грохнути» поля і відступи всіх елементів за допомогою * вельми непросто, існує один універсальний скидання на базі селектора, про який слід пам'ятати: *. Він змінює відступ і рамку, які стають частиною ширини елемента, а не доповненням до неї. Щоб дізнатися про це більше, подивіться статтю Пола Айріш (Paul Irish) box-sizing: border-box - порвіть всіх! .

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі