существует ли ограничение на размер файла css?

Я использую ASP.NET MVC для разработки сайта. CSS-файл вырос до 88 КБ и имеет чуть больше 5000 строк. Недавно я заметил, что стили, добавленные в конце, отсутствуют в браузере. Существует ли ограничение на размер файла CSS или на количество строк?



EDIT:
Извините, я забыл упомянуть, что эта проблема возникает в Windows 7 как в FireFox, так и в IE8.

740   11  

11 ответов:

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

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

Одно место, чтобы начать делать Google sesarch на CSS reset. Существует несколько различных реализаций,но они обычно следуют теме переопределения различий в макете для каждого из браузеров и удаления произвольных границ, полей и отступов и т. д. Начнем с чистого листа, если хотите. Затем вы можете идти дальше и создавать свои стили оттуда, стараясь максимально использовать каскадирование и css-цепочку

Цепочка-это когда у вас есть более одного класса на элементе. например: 

<div class="box right small"></div>

box Возможно, у вас есть некоторые общие стили, которые вы хотели бы применить ко многим элементам блока, таким как div, h1...Н6, п, ул, литий, таблицы, цитаты, заранее, форма. small является самоочевидным right может быть просто выровнен справа, но с правым заполнением 4px. Что угодно. Дело в том, что вы можете иметь несколько классов для каждого элемента и создавать стиль из многоразовых строительных блоков - групп индивидуальных настроек стиля. Иначе называемые классами.

На очень простом уровне ищите возможности комбинировать стили:

Итак: 

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}  
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}

Становится 

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}  
h2 {font-size:1.2em;}  
h3 {font-size:1.0em;}
Только немного меньше, но делайте это много раз, и вы можете изменить ситуацию.

Также, Проверьте свой css. Эта воля поможет выявить ошибки в коде.

12  
2010-07-09 16:30:45

Internet Explorerимеет , как говорят, ограничение 4096 CSSПравил на файл. Существует ограничение на функцию addRule, которое, похоже, применимо и к правилам, применяемым через таблицу стилей: Ссылка

Кроме того, он имеет ограничение на количество таблиц стилей, которые можно встроить в один документ. Я думаю, что это 20.

16  
2010-07-09 13:57:29

Что говорит валидатор CSS о ваших правилах CSS?

Вырезать и вставить последние "неэффективные" правила вашей таблицы стилей в ее начале: некоторые из них сейчас работают?

Очевидные ошибки опечаток можно увидеть с помощью хорошего текстового редактора, такого как PSPad, Notepad++, Scite: " ; /* */ и так далее. Они имеют довольно ограниченный объем, как ;, или легко видны, как комментарий, не закрытый. Менее очевидный, с которым я столкнулся, не закрывал собой дверь. скобки: 
background: green url(img/dummy_gradient.png left top no-repeat;

Ничего не работало до следующего ) в моих правилах CSS 50 строк ниже!

9  
2010-07-09 15:20:30

Ваш вопрос:

Существует ли ограничение на размер файла CSS или на количество строк?

Ответ, для IE9 и ниже, является да , в зависимости от того, что вы подразумеваете под "линиями" и "пределом размера".

  1. размер: максимальный размер таблицы стилей, которую будет читать IE9 и менее, составляет 288 КБ. Любые стили после этого знака не читаются. прочитайте эту статью Джошуа перины для получения дополнительной информации об этом .
  2. нет максимальное количество линий в таблица стилей, о которой я знаю. Существует максимальное число селекторов. IE9 и ниже останавливает чтение (и может даже не загружать файл, эта информация, кажется, витает в воздухе) при 4095 селекторах на таблицу стилей. (см. связанную статью ниже)
  3. Если под "строками" вы подразумеваете, сколько строк связанных таблиц стилей @import вы можете добавить в файл, то вы можете импортировать максимум 31 таблицу стилей. Каждая таблица стилей может иметь 31 максимум @импортированных таблиц стилей. (см. связанную статью ниже)
  4. @импорт вложенности поддерживает до 4 уровней в глубину.

В этой статье на MSDN немного больше говорится о селекторе max и связанных таблицах стилей, а также о том, как они пришли к этим цифрам при разработке IE.

7  
2014-10-05 09:29:45

Нет, это не предел. Вероятно, файл кэшируется, и по этой причине вы не видите изменений. Попробуйте очистить кэш браузера илиCtrl+F5 .

6  
2010-07-09 13:51:46

Нет никаких ограничений для большинства обычных браузеров (как указано в большинстве ответов). Еще одно очень важное соображение. Если вы сжимаете свои ответы, в Apache я бы использовал gzip или deflate, размер файла резко уменьшается. Поскольку CSS очень часто повторяется, и, например, в ваших 5000 строках вы используете слово "цвет" 800 раз, сжатие отправит только один экземпляр Слова "цвет" в браузер с 799 ссылками на слово в сжатом словаре. Так что ваш файл может быть 88K на диске, но 9K по проводу.

Инструменты, такие как FireFoxes Firebug, полезны для просмотра размера сжатого файла. Я уверен, что IE имеет инструмент просмотра заголовка http.

Итак, чтобы подчеркнуть мою точку зрения, 88K-это размер файла на диске, в то время как при использовании сжатия вам нужно учитывать размер файла в ответе.

2  
2010-07-09 14:05:01

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

Это может быть причиной вашего беспокойства.

1  
2010-07-09 14:28:14

Может быть в некоторых браузерах (я не слышал об одном, но это возможно), но 88 КБ абсолютно нормально для CSS-файла.

0  
2010-07-09 13:56:14

Теоретически предела нет.

Практически, большинство обычных браузеров (FF, Chrome, Opera, Safari) могут обрабатывать все, что вы бросаете в них. Однако некоторые старые и / или мобильные браузеры (Access NetFront, для одного - в комплекте со многими мобильными телефонами) сталкиваются с проблемами с большими страницами (около 100 КБ и выше) и выбрасывают всевозможные ошибки.

TL; DR: нет, если только вы не пытаетесь поддерживать все виды странных браузеров.

0  
2010-07-09 13:56:43

Есть, конечно, предел для того, что браузеры могут обрабатывать, но это, безусловно, намного больше, чем 88 килобайт или 5000 строк. Обоснованное предположение будет что-то вроде мегабайта или 65535 строк... Скорее всего, вы столкнетесь с проблемами производительности задолго до того, как достигнете предела.

Причина, по которой вы не видите изменений, вероятно, заключается в кэшировании. Вы можете использовать Ctrl+F5 чтобы очистить кэш для страницы в вашем собственном браузере (как упоминал Дарин.)

Переименуем CSS файл, когда мы публикуем новую его версию, чтобы быть уверенными, что все посетители получают последнюю версию.

0  
2010-07-09 14:00:42

Вы проверили свой CSS? Некоторые браузеры включают стили вплоть до синтаксической ошибки (или некоторых синтаксических ошибок), а затем эффективно усекают файл для вас, что приводит именно к такому поведению.

Я бы также проголосовал за рефакторинг вашего CSS, возможно, Вам сойдет с рук немного меньше . . .

0  
2010-07-09 16:25:02

Comments

    Ничего не найдено.
Click here to cancel reply.