Головна » Верстка » CSS Reset – Скидаємо CSS стилі
5
Вер
plus minus

CSS Reset – Скидаємо CSS стилі

CSS Reset (або ж reset.css) – це  css файл, ціль якого, скидання стилів і досягнення максимально однакового відображення HTML сторінки в різних браузерах.

Всі хто стикався із верстанням знають, які браузери бувають “капризні”. А все тому, що кожний браузер вважає за потрібне встановити свої значення стилів для різних HTML елементів. CSS Reset допоможе вам “підігнати” стилі під один шаблон.

Простим прикладом цього  може бути  широко вживаний елемент, як а. Більшість браузерів таких як: Internet Explorer та Firefox елемент а підкреслюють і виділяють синім кольором, а уявіть, що через рік виходить новий браузер та його розробники для елемента а використовують оранжевий колір і курсив (а)…. Що ж тоді буде із вашою HTML сторінкою? Жах… чи не так?

Але не впадаємо в паніку тому що  на допомогу нам приходить CSS Reset :)

З чого все почалось.

Джерела говорять про те, що вперше CSS Reset був застосований у 2004 році Ендрю Креспанісом (Andrew Krespanis) і мав структуру з універсальним селектором, який ставився на початку CSS файла і задавав нульові відступи для margin і padding.

Забавно, чи не так? Але і тут є свої нюанси, які нам не потрібно знати, так як ми підемо далі.

Рекомендації, що до CSS Reset

  • Ваш reset.css файл, має бути першим, що побачить браузер
  • Використовуйте окремий CSS – файл для CSS Reset
  • Старайтесь уникати використання універсального селектора
  • Уникайте надлишкових описів

Оптимальний CSS Reset.

Для кожного він буде свій і даний CSS Reset буде лише прикладом.

Як підключити reset.css файл.

Нічого складного, існує два варіанти:

1) Через @import. І це має вигляд:

2) Через <link/>. І це має вигляд:

Особисто я надаю перевагу другому методу, так як даний метод “шустріший”

Можливо і третій варіант, вписати ваш CSS Reset прямо у Style.css, алеу цьому багато недоліків і я не рекомендую таке робити.

Онлайн збірка CSS Reset

Ви можете використати наступний сайт для створення власного CSS Reset. Плюс, там є можливість використання різноманітних “бонусів”. Ось і саме посилання: “Online сборка reset.css

 

На кінець поділюсь корисним посиланням на статтю мого партнера: Як встановити WordPress

Додав Admin | 05.09.2012
(1 votes, average: 5.00 out of 6)
Loading ... Loading ...

Схожі записи:


  • lukom

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

    • http://WPfan.com.ua/ WPfan

      Це все досить відносно, одні працюють в блокноті інші в дрімвівері, одним CSS Reset в поміч, іншим зайвий… Головне це результат :)

  • http://twitter.com/Sergunik Serg Top

    Вже давно писав про це –
    http://sergunik.name/?p=158