Я использую ASP.NET MVC для разработки сайта. Файл CSS вырос до 88 КБ и имеет более 5000 строк. Недавно я заметил, что стилей, добавленных в конце, нет в браузере. Есть ли ограничение на размер файла CSS или количество строк?
ИЗМЕНИТЬ: Извините, я забыл упомянуть, что эта проблема возникает в Windows 7 как в FireFox, так и в IE8.
Я думаю, что если у вас возникли проблемы с размером ваших файлов css, пришло время переосмыслить стратегию стилизации. C в CSS означает каскадирование. Довольно часто, когда CSS файлы становятся слишком большими, это связано с тем, что стили не используются повторно, когда это необходимо, и из-за плохого использования каскадного поведения.
Я не говорю это легкомысленно. Я работал над некоторыми крупными, сложными розничными сайтами и в настоящее время на очень сложных финансовых торговых приложениях. Всякий раз, когда я нахожусь на сайтах с более чем несколькими сотнями стилей, мы добились значительных улучшений в дизайне, сокращении сложности и улучшении ремонтопригодности за счет снижения сложности css.
Одно место для начала - это сесарш Google на css reset. Существует несколько разных реализаций, но они обычно следуют теме переопределения различий в макете для каждого из браузеров и удалении произвольных границ, полей и дополнений и т.д. Начиная с чистого листа, если хотите. Затем вы можете продолжать и создавать свои стили оттуда, стараясь максимально использовать каскадный и css chaining
Цепочка - это место, где у вас есть более одного класса для элемента. например:
<div class="box right small"></div>
box может иметь некоторые общие стили, которые вы могли бы применить ко многим элементам блока, таким как div, h1... h6, p, ul, li, table, blockquote, pre, form. 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. Это поможет вам обнаружить ошибки в вашем коде.
В Internet Explorer указано, что имеет ограничение в 4096 правил CSS для каждого файла. Существует ограничение на функцию addRule, которая, как представляется, применима к правилам, применяемым также в таблице стилей: Ссылка
Кроме того, он имеет ограничение на количество таблиц стилей, которые вы можете вставлять в один документ. Я думаю, что это 20.
Что делает CSS validator о ваших правилах CSS?
Вырезать и вставить последние "неэффективные" правила вашей таблицы стилей в начале: некоторые из них теперь работают?
Очевидные ошибки опечатки можно увидеть с помощью хорошего текстового редактора, такого как PSPad, Notepad ++, Scite: " ; /* */ и так далее. Они имеют довольно ограниченную область, например, ; или легко видны как комментарий, который не закрыт. Менее очевидный, с которым я столкнулся, не закрывал круглую скобку:
background: green url(img/dummy_gradient.png left top no-repeat;
Ничего не работало до следующего ) в моих правилах CSS 50 строк ниже!
Нет предела. Вероятно, файл кэшируется, и по этой причине вы не видите изменений. Попробуйте очистить кеш браузера или Ctrl+F5.
Ваш вопрос:
Есть ли ограничение на размер файла CSS или количество строк?
Ответ, для IE9 и ниже, да, в зависимости от того, что вы подразумеваете под "строками" и "пределом размера".
Нет ограничений для большинства обычных браузеров (как указано в большинстве ответов). Еще одно очень важное соображение. Если вы сжимаете свои ответы, в Apache я бы использовал gzip или deflate, размер файла резко сократился. Поскольку CSS очень повторяющийся, и, например, в ваших 5000 строках вы используете слово "цвет" 800 раз, сжатие будет отправлять только один экземпляр слова "цвет" в браузер с 799 ссылками на слово в сжатом словаре, Таким образом, ваш файл может быть 88K на диске, но 9K по кабелю.
Инструменты, такие как FireFoxes Firebug, полезны для просмотра сжатого размера файла. Я уверен, что IE имеет инструмент просмотра заголовков http.
Итак, чтобы понять, что 88K - это размер файла на диске, а при использовании сжатия вам нужно рассмотреть размер файла в ответе.
Если вы не видите дополнения к нижней части отраженного файла, посмотрите, можете ли вы определить, где он ломается, и искать глупые ошибки и ошибки. CSS провалится довольно тихо, но все равно будет работать до тех пор, пока это не произойдет.
Это может быть причиной ваших забот.
В некоторых браузерах может быть (Ive не слышал об одном, но его возможно), но 88 КБ абсолютно подходит для файла CSS.
Теоретически нет предела.
Практически большинство обычных браузеров (FF, Chrome, Opera, Safari) могут обрабатывать все, что вы бросаете на них. Однако некоторые из старых и/или мобильных браузеров (Access NetFront, для одного - в комплекте со многими мобильными телефонами) сталкиваются с проблемами с довольно большими страницами (около 100 КБ и выше) и генерируют всевозможные ошибки.
TL; DR: Нет, если вы не пытаетесь поддерживать все виды странных браузеров.
Конечно, существует ограничение на то, что браузеры могут обрабатывать, но это, безусловно, намного больше, чем 88 килобайт или 5000 строк. Ученые предполагали бы что-то вроде мегабайта или 65535 строк... Вероятно, вы столкнетесь с проблемами производительности задолго до того, как достигнете предела.
Причина, по которой вы не видите изменений, вероятно, кэшируется. Вы можете использовать Ctrl + F5, чтобы очистить кеш для страницы в вашем собственном браузере (как упоминал Дарин).
Мы переименуем файл CSS при публикации новой версии, чтобы убедиться, что все посетители получают последнюю версию.
Вы подтвердили свой CSS? Некоторые браузеры будут включать стили до точки синтаксической ошибки (или некоторые синтаксические ошибки), а затем эффективно обрезать файл для вас, что приведет к именно этому поведению.
Я бы также проголосовал за рефакторинг вашего CSS, вы, вероятно, можете немного уйти с меньшим количеством.,.