Способы подключения файла стилей CSS

Сегодня мы поговорим о CSS3, а точнее, об адаптивной вёрстке. Про саму адаптивную вёрстку мы говорили в прошлой статье. В этой статье мы рассмотрим с помощью каких инструментов можно CSS3 можно произвести подобную разметку.

На самом деле есть несколько вариантов установки подобных правил, и каждый человек выбирает те, что ему нравятся. Давайте рассмотрим их.
Подключение дополнительных файлов CSS3
Одним из вариантов является дополнительное подключение правил CSS3:


<link rel="stylesheet" type="text/css" media="all" href="css/style.css " /> <!--базовые стили-->
<link rel="stylesheet" type="text/css" media="all" href="css/news.css" /> <!--общие стили для внутренних страниц сайта-->
<link rel="stylesheet" type="text/css" media="all" href="css/profile.css" /> <!--индивидуальные стили для конкретного подраздела--> 

Как видно из этого примера мы видим подключение трех файлов CSS. В первом случае, style.css содержит основные стили, news содержит стили внутренних страниц сайта, а profile - стили раздела профиля. Проще говоря, зайдя на главную страницу сайта браузер загрузит style.css. Если вы перейдёте в профиль, то подгрузится profile.css.
Обратите внимание на media="all". Этот параметр говорит, что стили из этих CSS будут применяться ко всем устройствам, независимо от самого устройства и размера экрана. Как же заставить наш сайт подстраиваться под нужное разрешение?

<link rel="stylesheet" media="screen and (min-width: 600px)" href="pad.css" />

Если вы внимательно посмотрите этот код, то увидите, что media="all" сменился на media="screen and (min-width: 600px)". Это правило, при котором будет подключаться мобильная версия pad.css. В нашем случае, условием должно быть разрешение экрана равное или больше 600px. Так же можно использовать параметр max-width. В этом случае мы указываем максимальное разрешение экрана, и CSS будет подгружаться, если разрешение экрана будет до выставленного параметра.
Кстати, для продукции Apple необходим свой код:

<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Вроде все хорош и понятно, для каждого устройства пишутся свои стили и CSS подгружается с помощью media="screen and (min-width: заданное число.px)". Однако, множество мелких стилей - большое количество обращений к серверу. А это может быть проблемой для загруженных сайтов. Да и спецификация для web-мастеров говорит о том, что лучше использовать один файл CSS.
Еще одним способом подключения каскадных таблиц стилей является директива @import. @import очень интересная директива. Она позволяет использовать параметр link не в HTML, а в CSS. Что это означает. Мы уже разобрались, что не стоит захламлять head подключениями по типу link. Теперь, имея один CSS подключённый по типу link, указывать в нем параметр @import, например:

@import url("<путь к CSS-файлу>") [тип устройства];
@import url("pad.css") screen and (min-width: 600px) and (max-width: 1200px);

То есть, вы можете в самом 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. Выглядит это, примерно, так:

@media screen and (max-width: 1000px) {
.news {
padding: 0 15px;
background-color: blue;
}
}

Допустим, у нас есть класс .news (статья, новость). У данного класа есть свои параметры. Эти параметры будут применяться для любого устройства. Но мы решили сделать адаптивный дизайн, и изменить отображение на экране планшета. В данном случае мы выставим @media с указанным максимальным разрешением. Это говорит о том, что данные параметры будут применяться для всех разрешений равных, либо меньше 1000px (можно указывать любое количество @media с персональными параметрами и разрешением экрана). Причём, не важно какой у вас фон данного класа на основном сайте, в мобильной версии (в нашем примере, это будет синий цвет).
В Media Queries должны использоваться те же классы, что и для основного сайта, но с параметрами оптимизированными для мобильных платформ. Еще одной ошибкой при работе с Media Queries является то, что многие забывают закрывать скобку. Если вы не заметили, то после @media с нужными нам параметрами, открывается скобка, после чего идут классы с новыми параметрами, и после всего это скобка закрывается. Внутри открытых скобок Media Queries можно вписать любое количество классов. В нашем примере только класс .news, но вы можете поместить абсолютно все классы, которые требуют изменения параметров работы с мобильными устройствами.
Как вы поняли, для себя оптимальным вариантом я избрал Media Queries. Так как используется лишь один CSS файл. Единственное, если вы работаете большой командой, и каждый блок сайта на разработке разных людей, достаточно удобно использовать @import, чтобы каждый мог работать над своим CSS файлом. Тем не менее, в финальной версии советую все переписать в единый файл CSS.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: