Условное использование CSS @import - PullRequest
Новая
       9

Условное использование CSS @import

1 голос
/ 21 апреля 2011

скажем, у меня есть 2 отдельных CSS; desktop.css и ipad.css Теперь desktop.css уже вызывается из 100 различных HTML, и я хочу применить новый ipad.css к этим 100 htmls. Теперь в desktop.css могу ли я использовать @import вверху, говоря 

@import "ipad.css"

Затем в ipad.css я использую проверку @media для iPad, используя 

@media only screen and (device-width : 768px) 
{  
/* All iPad style definitions here */
}

Мой вопрос:

  1. Хорошо ли подходит этот подход, и будет ли он работать, т. Е. Отдельные CSS будут применяться к настольному ПК против iPad?

  2. Поскольку я пишу @import, ipad.css загружается всегда, даже если это рабочий стол и будет ли это иметь огромное влияние на производительность (загрузка страницы)

Пожалуйста, предложите любой другой подход (кроме использования link media = .device-width ..), поскольку я не хочу ничего обновлять на самой html-странице.

Спасибо.

1 Ответ

0 голосов
/ 21 апреля 2011

Хорошо ли подходит этот подход, и будет ли он работать, т.е. отдельные CSS будут применяться к настольным компьютерам против iPad?

Нет. Предполагается, что iPad и только iPad будут иметь ширину устройства 768 пикселей.

Поскольку я пишу @import, будет ли загружаться ipad.css всегда, даже если это рабочий стол и

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

окажет огромное влияние на производительность (загрузка страницы)

Будет дополнительный HTTP-запрос. Однако в файле должно быть загружено много данных. «огромный» - понятие относительное.

Пожалуйста, предложите любой другой подход

Применить медиазапрос к самому оператору @import.

...