Бездоганний дизайн сайту: reset CSS

153 0 Новини високих технологій

Коли браузер відкриває сайт, він автоматично доповнює стильові правила значеннями за замовчуванням. Різні версії різних браузерів мають свої варіанти значень правил CSS. Якщо розробник не вказав потрібне значення правильно або зовсім не описав потрібне правило, браузер використовує свій варіант. Ідея зробити CSS reset при завантаженні сайту дозволяє нівелювати відмінності між браузерами і відображати потрібний контент завжди і на всіх пристроях однаковим чином в більшості випадків.

Суть і виконання ідеї

HTML-елементи сторінки розміщуються за правилами CSS. Розробник не зобов'язаний вказувати всі правила по всім елементам і може скористатися значеннями за замовчуванням. У більшості випадків це прийнятне рішення. Якщо актуальна задача ідентичного відображення веб-ресурсу на різних пристроях, вікнах різних браузерів, то доцільно встановити критичні правила потрібні значення.


Бездоганний дизайн сайту: reset CSS
У прикладі наведено різні варіанти рекомендованого набору reset. CSS-правила наводяться до «нульового» станом. Фактично ідея полягає в тому, щоб вказати значення критичних правил, а потім побудувати дизайн сайту на «чистому» підставі. При проектуванні сайту можна створити окремий файл установки критичних значень по всіх використовуваних правил CSS. Використовувати настільки «потужну» ідею, як «*»:
  • {набір значень для всіх правил}
  • - не найкраще рішення. Багато стильові файли починаються саме з такого варіанту reset CSS. HTML5 пропонує широкий спектр можливостей для формування структури і змісту сторінки, тому при розробці власного варіанту встановлення початкових значень краще виборчий шлях, ніж рішення причесати все оптом під одну гребінку - «*».


    Опис стилів сторінки може бути об'ємним. Доцільність використання поводження «*» або звернення до кожного конкретного правилом, класу чи ідентифікатором залежить від розробника.

    Власні варіанти установки значень в CSS

    На просторах Інтернету блукає безліч наборів рекомендованих значень народних правил і списків тегів, які підлягають скиданню в «нульове» стан:
  • є компетентні думки;
  • пропонуються, теоретично обґрунтовані варіанти;
  • авторські роботи асів CSS;
  • є безліч приватних виробів.
  • Скачать типовий варіант файлу reset.css - не проблема, але це не завжди доцільне дію.
    Бездоганний дизайн сайту: reset CSS
    Зліва (1) набір «продуктивних» рішень від декількох гуру CSS. Справа (2) - пара стилів, яких цілком достатньо для відображення простий сторінки для розміщення картинки товару інтернет-магазину. Простота - запорука успіху: просто, зрозуміло і изменяемо. Сумнівів немає: знання та вміння колег - повчальні і практичні, але в кожному конкретному справі продуктивніше розумне рішення.

    Системи управління сайтами і ручна робота

    Всі популярні системи управління сайтами (CMS) включають в себе файли стилів. Частина цих стилів забезпечує еквівалентну відображення сайту в різних браузерах на будь-якому устаткування. Розібратися в тому, де описано, який правило або властивість успадковується або уточнюється, досить складно.
    Бездоганний дизайн сайту: reset CSS
    Застосування CMS знімає проблему того, як підключити reset.css і використовувати його, але обмежує розробника, коли необхідно коректно і точно впливати на дизайн веб-ресурсу. Власний варіант набору значень і тегів, які підлягають встановленню в початковий стан, переважніше. При створенні сайту з нуля - це єдино розумний варіант. Застосувати знання та вміння колег і аналітично вивчити кожен файл reset.css, знайдений в Інтернеті, завдання цікава, але малоперспективне.
    Бездоганний дизайн сайту: reset CSS
    Якісний веб-ресурс використовує певний набір тегів мінімізує їх кількість і прагне до простоти викладу контенту. Брати за основу файл, написаний для Yahoo, Google або Yandex - практично, але завжди розумніше свій власний, менш авторитетний, більш скромний, але самодостатній варіант.

    Доцільність скидання CSS

    Англійська термінологія відмінно вписалася в програмування, але в контексті термінів reset і CSS сенс першого зовсім не в скиданні другого - таблиці каскадних стилів. Це не випадок перезавантаження Windows, коли вона йде в себе і ні на що, крім як на «Резет», не реагує. Бездоганно виконаний сайт повинен контролювати не лише себе, свій функціонал і діалог з відвідувачем. Розробник повинен продумати всі варіанти відображення необхідного дизайну у всіх можливих браузерах на всіх доступних обчислювальних платформах.
    Бездоганний дизайн сайту: reset CSS
    Завдання нездійсненне (браузери безперервно прогресують, а пристрою постійно збільшуються числом і функціональністю), але щось зробити тут все ж можна. Правильна установка початкових значень стилів - реальний сенс reset CSS. Розробник систематизує всі стилі, які має намір використовувати, і складає список тегів, до яких будуть застосовані обрані стилі. Ця робота проводиться в тісній співпраці з розробкою питань спадкування і поєднання різних стильових правил для компактного опису смислових блоків контенту, що включають семантично пов'язані елементи.

    Система стилів - бездоганне підстава

    Систематизація стилів визначається тематикою сайта, розв'язуваної завданням, досвідом розробника. На реальний виріб можуть чинити істотний вплив інші фактори.
    Бездоганний дизайн сайту: reset CSS
    Логіка ідеї CSS reset - це ідея сформулювати основу не тільки в системі стилів, але й у функціонуванні сайту в цілому. Веб-ресурс - це конкретна мета, реалізація необхідної функціональності, правил відображення інформації та діалогу з відвідувачем.

    Популярі новини
    Загрузка...