Новини високих технологій
» » Бездоганний дизайн сайту: reset CSS

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

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

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

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


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


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

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

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

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

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

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

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

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

Систематизація стилів визначається тематикою сайта, розв'язуваної завданням, досвідом розробника. На реальний виріб можуть чинити істотний вплив інші фактори.
Логіка ідеї CSS reset - це ідея сформулювати основу не тільки в системі стилів, але й у функціонуванні сайту в цілому. Веб-ресурс - це конкретна мета, реалізація необхідної функціональності, правил відображення інформації та діалогу з відвідувачем.
Цікаво по темі
Як підключити CSS: від статики до динаміки
Як підключити CSS: від статики до динаміки
Статичне підключення стилів CSS HTML-сторінці - проста задача. Сформовані традиції пропонують три основних варіанти: безпосередньо на тезі, в
Синтаксис CSS: приклади використання
Синтаксис CSS: приклади використання
Простота концепції CSS дозволяє підключити стильові правила з зовнішнього файлу, з тега сторінки, через атрибут стилю на тезі або через
Як змінити колір тексту в HTML: приклади та ідеї
Як змінити колір тексту в HTML: приклади та ідеї
Колір і розмір тексту має значення для коректного відображення сторінки і комфортного сприйняття веб-ресурсу його відвідувачем. Розробник може
Як підготувати iPhone 5 до Hard Reset? Процес виконання жорсткого перезавантаження
Як підготувати iPhone 5 до Hard Reset? Процес виконання жорсткого перезавантаження
На жаль, навіть новий iPhone під час роботи може зависнути і перестати працювати. Подібне може статися при зараженні вірусами або системному збої.
Зміст і використання JavaScript void
Зміст і використання JavaScript void
Відсутність значення і значення undefined - раритет найдавніших часів інформаційних технологій, але навіть в сучасному світі у них є місце і
Javascript Object: створення об'єктів і робота
Javascript Object: створення об'єктів і робота
Об'єкти jаvascript - це, насамперед, об'єктна модель сторінки - DOM. Функціональні можливості мови також реалізовані в якості об'єктів, і