Не используйте @import

[dshster]

Интересно, это будет удобно тогда, когда надо четко определить порядок загрузки. Бывали часто такие ситуации, когда нужно «задержать» загрузку определенной таблицы стиле, пока не загрузиться предыдущая. Спасибо, учту этот момент, до этого всегда использовал исключительно link.

[saintech]

Давно не использовал @import и даже не знал что с ним так дела обстоят). Спасибо.

[Mithgol]

Каким образом getElementsByClassName зависит от применяемых стилей? Похоже, соответствующий кусок хабратопика следует переправить.

[konfuze]

Ну разве что скрипт меняет текущие стили на основании присвоенных в css (типа увеличение left при position: absolute).

[habratchanka]

Представьте что скрипт делает следующее:
document.getElementsById(«mydiv»).style.height

А стили для #mydiv еще не загружены. Вот в этом и проблема.

[homm]

> Представьте что скрипт делает следующее:
Чего будет деать? Если присваивать данному выражению значение, оно перекроет стили в любом случае, когда бы они не загрузились — здесь не действует правило «кто первый встал того и тапки». Если значение будет браться из этого выражения, оно будет пустым, пока тем-же ява-скрпитом не будет присвоено другое значение. ТАК css свойства не получаются.

> Вот в этом и проблема.
Да нет, проблема в том, что вы матчасть не знаете.

[nekt]

Понимания матчасти нет — это я согласен.

Но что если требуется взять
document.getElementsById(«mydiv»).style.clientHeight? :)

В общем ситуация такая может быть. Но аффтор сам дурак что в таком случае использует импорт. А если хочет динамическую подгрузку стилей — пусть использует нечто вроде document.createElement('link') и отслеживает их подгрузку ручками. Хотя не знаю что будет если внутри него будет импорт…

И вообще — собирайте все файлы стилей в один и архивируйте.

[nekt]

ну да. написал фигню :) ессно там стиль не нужен :)

в том-то и дело что левое значение ведет к ошибкам. В основном это ошибки рассчета размеров элементов и соответсвенно их позиционирования в случае если эту функцию берет на себя жс-движок

имя класса да. никак не завязано. Опять-же если не работать с классами внутри файла стилей средствами жс. Вроде это как-то можно делать… но также вроде это жуткое извращение :)

[habratchanka]

я имела ввиду не присваивание, а забор значения из стилей. Если сделать еще и так:
alert(document.getElementsById(«mydiv»).style.height);

вы получите Undefined.

[Xenviper]

По хорошему, вы сначала должны убедится, что вся страница вместе со скриптами загружена, а только потом выполнять скрипт.

[habratchanka]

опять же все перекладывается на плечи разработчика :)

[Xenviper]

Естественно, а на кого ещё? ))

[habratchanka]

на разработчиков браузеров :)

[IntenT]

а как ведут себя более другие браузеры?

[habratchanka]

какие другие? В статье говорится обо всех наиболее используемых.

[IntenT]

Любые другие.
В стать упоминается только ИЕ
И засунь себе свой минус в жопу

[habratchanka]

lol. я даже не голосовала.

[mocksoul]

на самом деле он частично прав
таргетная аудитория с IE не так критично относится к подобного рода шалостям. А вот Safari/Konqueror4/Webkit/Chromonium/Opera… куда интереснее =)

[bezz]

Странно, что эта статья опубликована сразу же после chikuyonok.ru/2009/04/dont-use-import/

[sunnybear]

о черт, отметил статью для перевода — а ее уже перевели :)

[hannimed]

Каким образом меряется скорость загрузки файлов в ИЕ?

[sunnybear]

Http Watch?

[akamuza]

хоть импортом и не пользовался, но когда-нить всё равно попробовал бы)
а вот вы своей статьёй сэкономили мне много времени в будущем, пока я с этим импортом разбирался бы, что не так)
спасибо!

[LDEV]

Вы не учли самую важную деталь — при использовании import браузер не лезет на сервер с заголовком If-modified-since и не ждет 304. Он полезет если упорно нажать F5 или ctrl+f5.

Лично для меня это играет самую важную роль, так как нет лишних запросов на каждую страницу.

[habratchanka]

Не думаю что запрос If-modified-since будет забираться дольше, чем загрузка самого стиля. В случае непараллельной загрузки, да еще и не в том порядке никакой выгоды нет.

[LDEV]

выгода — 100%! один раз загруженные стили хранятся в кэше и браузер больше не будет на каждую страницу делать запросы. а если оставлять LINK — при каждом открытии страницы — запрос на файл стилей, а если не один еще…

[sunnybear]

@import и link используют кэш равноправно. Это равносильные конструции везде, где это касается диалога браузера с сервером. В статье идет речь про внутреннюю логику обработки браузером последовательности этих элементов на странице.

[reflexing]

Потому что это семантично. Я тоже клал на линки с высокой колокольни, но не для продакшена, а во время разработки.

Я делаю так:
index: />
style/style.css:
@import url(«reset.css»);
@import url(«layout.css»);
@import url(«visual.css»);

Удобно править только нужные файлы.

[reflexing]

Хабр съел разметку, там в начале как раз линк на style/style.css

[ezodoc]

Вот! кстати — таже мысль пришла и мне на кануне; я как кодер — не хочу дёргать шаблон каждый раз, когда кто-то пропишет новый стиль. Поэтому указываю «master.css» в котором будут подключаться остальные стили.

Хотя чувствую — что надо проверить время загрузки…

[kellas]

Интересно, но я использую web-optimizer :)

[sunnybear]

таки запустился? :) поздравляю, кину ссылку в Twitter :)

[amabilis]

Хоть у меня опыт и небольшой, я использовала только линки. Автор подал пищу для размышлений и новых экспериментов.

[maxic]

:)

А что им (@import) кто-то пользуется? ;)

:)))

[homm]

Вполне, если нужно на одной какой-то конкретной странице много стилей подключить, которые в отдельный файл выносятся, но CMS-ка дубовая и подключить их в head не очень удобно.

[kibork]

Есть один момент, если файлов стилей много, то ИЕ 6 начинает глючить вплоть до падения, если импортить их через @import то этого не происходит. Недавно ловили этот баг почти 2 дня…

[akzhan]

Только вчера при общении с дизайнером говорил о желательности именно <link />.

Статья очень вовремя :)

[Lenochka]

Я обычно линкую только файл style.css, в него импортом добавляю все остальные css.
Целью всегда было уменьшить количество ссылок на стили и скрипты в, чтобы контент был ближе к верху. Ведь и главную навигацию специально спускают в коде вниз и стилями ставят сверху только для этого.

А проблем с загрузкой никогда не наблюдалось.

[ed_tsech]

Я вот тоже думаю почему бы так не делать. Или в таком случае свои косяки?

[Xenviper]

Лучше всего не сильно напрягаться по этому поводу.
Многие нормальные CMS кэшируют CSS стили в один файл и проблем с загрузкой их не должно возникать.

[lotas]

На самом деле стоит учитывать плохо документированную фичу IE 6 (и вроде IE 7), которая может загружать только 32 <link… > Элемента идущих в шапке.

Столкнулись на одном проекте давно уже, с такой проблемой, было много подключаемых CSS файлов, и после 32го все остальные не грузились

Проблема решалась разбивкой на блоки
в каждых из которых было не более 32х импортов

Хотя понимаю всю абсурдность такого кол-ва файлов стилей :)

[nicola]

В больших проектах, например с использованием dojo-dijit-dojox, без импорта туговато — тоже что программировать без require/import/include…
я думаю при разработке импорт очень хорош!
а в продакшен надо все стили скриптом (поищите или сами напишите) собирать в один файл (dojo build system — умеет это dojocampus.org/content/2008/05/26/dojo-build-201-layers-and-css-optimizing-builds/)

Совсем недавно для себя сформулировал правило -one entry point for js and css
те на странице только один link на стиль, c которого потом разростается дерево импортов
после билда в страничку подгружается тока один файл

[nicola]

кстати забыл напомнить про баг в ие — www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml — пункт 5

[nicola]

SMERT' IE

[cornelius]

Если в документе содержатся два и более тегов <link>, броузер должен представить пользователю список таблиц стилей, на которые ссылаются теги. Пользователь выбирает таблицу, которую броузер загружает и применяет при форматировании документа. Остальные таблицы из тегов <link> игнорируются.

Если речь идёт об @import, то, напротив, всякий распознающий стили броузер должен слить множество указанных в директивах таблиц в один набор стилевых правил для документа. При возникновении каких-либо взаимных противоречий приоритет имеет последняя импортированная таблица.

…

На практике популярные броузеры обращаются с таблицами стилей, присоединёнными с помощью тега <link>, так же, как с импортированными таблицами, каскадным образом совмещая их действие. Броузеры в настоящее время не позволяют выбирать таблицу стилей.

…

Ни один [броузер] не поддерживает множественные и выбираемые пользователем таблицы стилей, соответствующие стандарту CSS2.

«HTML и XHTML. Подробное руководство. 6-е издание» — Чак Муссиано и Билл Кеннеди

[facetus]

Кому что-то не удобно — чьи ж это проблемы, если в собственном коде ориентироваться не можете?

Как по мне — в разработке можно использовать все что угодно!
Но в конце концов у меня всегда получается один link, без @import, потому что вполне достаточно ОДНОГО .css в любой ситуации