Зміст
- Скористайтеся одним із двох безкоштовних методів для завантаження таблиць стилів на свою веб-сторінку
- Різниця між @import та
- Навіщо використовувати @import?
- Навіщо використовувати ?
- Що про тип медіа?
- Отже, який метод слід використовувати?
Скористайтеся одним із двох безкоштовних методів для завантаження таблиць стилів на свою веб-сторінку
Різні веб-сайти включають свої зовнішні каскадні таблиці стилів по-різному - або за допомогою підходу @import або шляхом посилання на цей CSS-файл. Яка різниця між @import та посиланням для CSS, і як ти вирішив, який із них кращий?
Різниця між @import та
Посилання - це перший спосіб включення зовнішнього аркуша стилів на ваші веб-сторінки. Він призначений для зв’язку вашої сторінки з вашим стилем. Він додається до голови вашого документа HTML.
Імпорт дозволяє імпортувати один аркуш стилів в інший. Це трохи відрізняється від сценарію посилань, оскільки ви можете імпортувати таблиці стилів всередині пов'язаного аркуша стилів.
З точки зору стандартів, немає різниці між посиланням на зовнішній аркуш стилів або його імпортом. Будь-який спосіб є правильним, і будь-який спосіб буде працювати однаково добре в більшості випадків. Однак є кілька причин, які ви можете використовувати одне за іншим.
Навіщо використовувати @import?
Багато років тому найпоширеніша причина, яка була використана замість (або разом із ним) @import це тому, що старші веб-переглядачі не розпізнавали @import, тому ви можете приховати від них стилі. Імпортуючи ваші таблиці стилів, ви, по суті, зробите їх доступними для більш сучасних браузерів, які відповідають стандартам, "приховуючи" їх від старих версій браузера.
Іншим способом методу @import є використання декількох таблиць стилів на сторінці, включаючи лише одне посилання в голову документа. Наприклад, корпорація може мати глобальний аркуш стилів для кожної сторінки на сайті, підрозділи мають додаткові стилі, які застосовуються лише до цього підрозділу. Посилаючись на аркуш стилів підрозділу та імпортуючи глобальні стилі у верхній частині цього аркуша стилів, вам не доведеться підтримувати гігантський аркуш стилів із усіма стилями для сайту та кожного підрозділу. Єдина вимога - будь-які правила @import повинні відповідати решті ваших правил стилю. Спадщина все ще може бути проблемою.
Навіщо використовувати ?
Причиною № 1 для використання пов'язаних таблиць стилів є надання альтернативних таблиць стилів для ваших клієнтів. Веб-переглядачі, такі як Firefox, Safari та Opera, підтримують атрибут rel = "альтернативний стиль стилів", і коли є один, це дозволить глядачам переходити між ними. Ви також можете використовувати перемикач JavaScript для перемикання між таблицями стилів в IE - найчастіше використовується для макетів масштабування для цілей доступності.
Одним з недоліків використання @import є те, що якщо у вас дуже проста голова, у якій є лише правило @import, на ваших сторінках під час завантаження може з’являтися «спалах невтішного вмісту». Просте виправлення цього - переконатися, що у вас є хоча б один додатковий посилання або елемент сценарію в голові.
Що про тип медіа?
Багато письменників стверджують, що ви можете використовувати тип медіа для приховування таблиць стилів від старих браузерів. Часто вони згадують цю ідею як користь для використання або @import або , але ви можете встановити тип медіа-файлів за допомогою будь-якого методу, і старіші веб-переглядачі, які не підтримують типи медіа, не переглядають їх у будь-якому випадку
Отже, який метод слід використовувати?
Більшість розробників сьогодні використовують посилання, а потім імпортують таблиці стилів у зовнішні таблиці стилів. Таким чином, у вас є лише один або два рядки коду для коригування у ваших HTML-документах. Але суть полягає в тому, що це залежить від вас. Якщо вам більше подобається @import, тоді займіться цим! Обидва методи відповідають стандартам, і якщо ви не плануєте підтримувати справді старі веб-переглядачі, немає жодних вагомих причин використовувати жоден із них.
