CSS для конкретной страницы или отдельный файл css при разработке мобильного сайта (webkit)?

Question

Я работаю на мобильном сайте для браузеров webkit. Я пытался найти информацию об использовании нескольких таблиц стилей в сравнении с одним файлом CSS. Существует много информации по этой теме, но не так много информации, касающейся мобильных браузеров. Мой сайт будет содержать несколько страниц, которые имеют css.

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

Если вы поместите все в один файл, он будет кэшироваться после загрузки, но это замедлит первую загрузку. Если бы у вас были файлы, относящиеся к конкретной странице, первая страница загружалась бы быстрее, но каждая другая страница имела бы удар при выполнении запроса css http для конкретной страницы.

У кого-нибудь есть мысли по этому поводу?

Звучит так, будто они говорят, что один файл лучше, если его размер меньше 1 МБ (что определит мой файл)?

http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/

Answer 1

Я думаю, что лучший подход - взглянуть на физические различия, когда вашим пользовательским агентом является мобильное устройство, такое как iPhone.

Обычно iPhone работает в мобильной сети, что значительномедленнее, чем обычное интернет-соединение, к которому подключен ваш средний компьютер.Это единственное реальное различие, в том, как работают разные сети, могут быть некоторые тонкие различия, означающие, что отдельные запросы могут занять больше времени в мобильной сети, но это будет просто предположение.

Любая обработка на устройствесамо по себе, безусловно, будет тривиальным, поэтому, на мой взгляд, я рекомендую то, что я рекомендую для веб-сайтов, предназначенных для обычных пользовательских агентов.Разработайте с несколькими таблицами стилей, а затем используйте инструмент, чтобы минимизировать все в один сжатый файл (отдельный при необходимости, условный IE и т. Д.).

Answer 2

При сборке для нескольких платформ я использую таблицу стилей по умолчанию (global.css) для всего, затем пишу таблицу стилей для конкретного носителя (т.е. screen.css, print.css, handheld.css); оттуда я создаю таблицы стилей исключений для конкретных экземпляров (то есть screen-ie.css, screen-ie7.css, handheld-iphone.css). Это дает мне наибольшую гибкость для максимально возможного количества методов представления.

Когда все будет именно так, как я хочу, я минимизирую «стек» для каждого экземпляра. Так в случае с iPhone: global.css + handheld.css + handheld-iphone.css = iphone. [YYYYMMDD] .css, на который я звоню через:

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="/css/min/iphone.[YYYYMMDD].css"/>
<!--<![endif]-->

Загружайте только то, что вам нужно, чтобы минимизировать занимаемую площадь.

Answer 3

Я бы сказал, что для разработки используют несколько файлов, затем при развертывании минимизируйте их до ОДНОГО файла. Я предполагаю, что большинство мобильных веб-браузеров будут выполнять кэширование ваших css-файлов. Кроме того, мне трудно представить файл css минимизированного мобильного сайта, который вырастет достаточно большим, чтобы по-настоящему беспокоиться [если вы не делаете такие вещи, как встроенные / встроенные изображения css]