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