Сьогодні ми поговоримо про CSS3, а точніше, про адаптивної верстці. Про саму адаптивну верстку ми говорили в минулій статті. У цій статті ми розглянемо за допомогою яких інструментів можна CSS3 можна зробити подібну розмітку.
Насправді є кілька варіантів установки подібних правил, і кожна людина вибирає ті, що йому подобаються. Давайте розглянемо їх.
Підключення додаткових файлів CSS3
Одним з варіантів є додаткове підключення правил CSS3:
Як видно з цього прикладу ми бачимо підключення трьох файлів CSS. У першому випадку, style.css містить основні стилі, news містить стилі внутрішніх сторінок сайту, а profile - стилі розділу профілю. Простіше кажучи, зайшовши на головну сторінку сайту браузер завантажить style.css. Якщо ви перейдете в профіль, то підвантажиться profile.css.
Зверніть увагу на media = "all". Цей параметр говорить, що стилі з цих CSS будуть застосовуватися до всіх пристроїв, незалежно від самого пристрою й обсягу екрану. Як же змусити наш сайт підлаштовуватися під потрібний дозвіл?
Якщо ви уважно подивитеся цей код, то побачите, що media = "all" змінився на media = "screen and (min-width: 600px)". Це правило, при якому буде підключатися мобільна версія pad.css. У нашому випадку, умовою має бути дозвіл екрана дорівнює або більше 600px. Так само можна використовувати параметр max-width. В цьому випадку ми вказуємо максимальний дозвіл екрана, і CSS буде довантажувати, якщо дозвіл екрана буде до виставленого параметра.
До речі, для продукції Apple необхідний свій код:
Начебто все хороший і зрозуміло, для кожного пристрою пишуться свої стилі і CSS подгружается за допомогою media = "screen and (min-width: заданий чісло.px)". Однак, безліч дрібних стилів - велика кількість звернень до сервера. А це може бути проблемою для завантажених сайтів. Та й специфікація для web-майстрів говорить про те, що краще використовувати один файл CSS.
Ще одним способом підключення каскадних таблиць стилів є директива @import. @import дуже цікава директива. Вона дозволяє використовувати параметр link не в HTML, а в CSS. Що це означає. Ми вже розібралися, що не варто захаращувати head підключеннями за типом link. Тепер, маючи один CSS підключений по типу link, вказувати в ньому параметр @import, наприклад:
Тобто, ви можете в самому CSS підключати додаткові CSS. Наприклад, вставивши в CSS другий рядок, ви змусите підключитися CSS для iPad. При цьому відбувається об'єднання з один CSS. Але і тут не пройшло без ложки дьогтю. По суті, @import це заміна link, тільки не HTML, а в CSS. А це означає те, що все одно будуть додаткові запити до сервера, як при N-му кількості CSS файлів. АЛЕ найголовнішою проблемою є те, @import підтримує тип носія, наприклад: projection, tv, screen. Так ось, мало того, що IE до 8 версії взагалі не розуміє @import, так ще й не завантажить CSS взагалі, якщо стоїть тип носія.
Ну, і останнім, на мій погляд, лучім способом для адаптивної верстки, є правило CSS - @media або Media Queries. C допомогою Media Queries можна створити адаптивну верстку, при цьому немає необхідності підключати додаткові CSS. Виглядає це, приблизно, так:
Шановні Новомосковсктелі! Якщо ви виявили в тексті помилку, не полінуйтеся, виділіть слово і натисніть CTRL + Enter. Зробимо мову чистішою!