sktemp

Я переверстал ячейки, уменьшив число элементов DOM. Теперь Yslow пишет Grade C on Reduce the number of DOM elements (раньше было D). Значит ли это, что Yslow знает способ сделать ещё меньше элементов? Я вот не представляю что ещё можно сделать.

Чем же он удобнее? В первом случае все правила в одном месте и не требуется искать по всему CSS остальные свойства для этого элемента.

Спасибо за разъяснение. А что будет быстрее применяться? .class1{ color:green; } .class2{ color:green; } .class3{ color:green; } или .class1, .class2, .class3{ color:green; } Стоит ли для каждого класса описывать все свойства или повторяющиеся свойства записывать в группы?

Спасибо. Буду изучать. Меньше каскада в CSS - больше скорость. Но каждый сайт нужно анализировать отдельно, а не бросаться бездумно в минимализм... Я не понял ваш ответ. Я всегда делаю так: #apa div{} #apa span{} #apa strong{} Но может быть быстрее будет отображаться, если сделать 3 класса? Я всегда исходил из того, что писать class - это лишние килобайты, которые будут передаваться. А css кешируется.

1) ну можно и не задавать выравнивание в лево если оно и так по умолчанию влево. 2) Вы сами не знаете чего хочете, то жалуетесь что float будет тормозить, то картинки будут медленнее доп. элементов. Вы уж определитесь.Я вам написал как сделать так чтоб был 1 элемент содержащий и текст и квадратики на бекграунде, без дополнительных элементов и флоатов. Дальше решайте сами как поступить. Я делал и так и так. Моя задача сделать отображение максимально быстрым. Решил обратиться к опыту сообщества. На данный момент вёрстка уже внедрена способом, подобным предложенным вами. Отличие в том, что я использую strong, чтобы были разные теги. Как вы считаете будет быстрее работать - делать разные классы или делать один основной класс и далее все стили применить к тегам внутри этого класса? Неужели нет тестов для проверки скорости отображения страницы?

А зачем text-align:left;? Вы считаете что добавление фонового изображения будет работать быстрее, чем увеличение количества элементов DOM?

Нет, не рассматривал. Даже не знал, что такое вариант есть. Но чтобы их сделать по правому краю, а зелёный текст по левому надо делать дополнительный тег. Так ведь? У меня задача не просто сверстать, а чтобы это отображалось быстро. Фоновая картинка не требует дополнительного тега, но в Explorer возникает эффект, что все ячейки уже отобразились и только в самом конце после паузы появляются квадратики. А использование float замедляет отображение ячеек в том же Explorer. Оба эффекта заметны когда несколько сотен ячеек. Показать тип ячейки. Такой дизайн, он не подлежит переработке. Мне надо увеличить скорость работы.

Вот результат Он пока без пресловутых квадратиков, так как я не знаю как их вставить в этом сервисе. Справа от зелёного слова ТЕКТ должны быть квадратики. Но вопрос не только в них. Я сверстал нижние блоки в ячейках с помощью float. Я ещё знаю два способа. С помощью позиционирования внутри каждой ячейки. И с помощью inline-block. Что вы посоветуете? И те же квадратики можно сделать с помощью float:right. А можно фоновую картинку делать.

В вёрстке мне необходимо изображать несколько квадратов внутри ячейки таблицы. Их можно сделать с помощью применения стилей к некоторому элементу DOM. Например, сделать три div. С одинаковой шириной и высотой, дать отступ справа, выровнять их вправо с помощью float. Но можно сделать Sprite и подставлять эти же квадратики фоном. Я уже делал и так и так. По моим наблюдение много float тормозит отображение. А использование фонового изображения создаёт эффект, что картинки появляются не сразу. Так как таких квадратиком до сотни на странице. Какие вы видите за или против этих двух способов? Или может есть что-то лучше, чем я описал?

Мой вопрос в том, есть ли объективный тест. Как скорость запроса к базе данных или выполнения скрипта. И если есть, то сверять по относительным величинам. Быстрее на 10%. Тогда влияние работы других программ можно не учитывать.

Нет. Так как я даже не знаю что такое стили со звёздочкой. Я так и сделаю. Только переверстаю в очередной раз по совету, который вы дали в соседнем топике.

Будут. Именно по этой причине. Сейчас свёрстанный сайт летает в Chrome и зрительно медленнее показывается в Explorer. Это я его уже переверстал. До этого разница была зрительно раза в два-три. Там было много float:left. Я заменил это всё на таблицу, логика данных это позволяла сделать.

Передо мной стоит задача сверстать страницу так, чтобы скорость отображения её была максимальна. Я использую Yslow для анализа страницы. Но существует ли другой инструмент? Можно ли проверить будет ли быстрее работать, например, float или position:absolute? Одно и то же можно сверстать разными способами, даже при одинаковом количестве элементов DOM. Как-то можно узнать, что отображается быстрее?

Спасибо за разъяснение.

Потому что ширина ячейки влияет на ВСЕ ячейки в столбце. Например, в столбце десять ячеек с шириной 100 пикселей (ширина задана всем ячейкам). Нельзя просто так взять и поменять ширину столбца, изменив ширину одной ячейки из десяти А если бы остальным ячейкам в столбце ширину не назначили, то сработало бы назначение ширины любой ячейке в столбце. <table id="apa"> <tr> <td class="first"></td><td></td><td></td> </tr> </table> Я говорю всем сделать 151 пиксель, но классу first 14. Где я заблуждаюсь?

Там не только в специфичности дело. Класс, похоже, назначен был только одной ячейке, а у всех остальных ячеек в этом столбце стоит ширина 151 пиксель Да. И почему так не работает? Я ожидал, что назначив всем ячейкам ширину, а дав класс первой, будет к ней применено свойства класса. Так и произошло. Все свойства были применены, кроме ширины. Отчего так? Ширина чем-то особенное свойство?

А так работает. Спасибо. У первого правила спецефичность выше. А если мне надо будет установить ширину не первой ячейки? Есть ли способ без использования CSS3?

У меня есть таблица. Ширина каждой ячейки, кроме первой, равна 151px. А у первой должна быть 14px. Таблица имеет id="apa". Я пишу свойство CSS #apa td{ padding: 0; width: 151px; } Первой ячейке я пишу class="first" .first{ width:14px; } Почему ширина не применяется? В FireBug пишется, что браузер его видит, но даёт приоритет ширине 151px. Как сделать так, чтобы ширина применялась корректно? Можно ли сделать без класса?

Да, вы правы. Тут не стоит вопрос лёгкости. Нужно добиться эффекта работы и в IE6. В IE9, как и в Firefox, Chrome, отображается корректно. Вот пример

Мне необходимо разместить заголовок поверх бордера абзаца. Я делаю это так: <p> <h1>заголовок<h1> Текст </p> Стиль: p{ display: relative; border: red 1px solid; background: white; } h1{ display: absolute; left:30px; top:-15px; background: white; padding:0 10px; } Это не работает в IE 6. Бордер сверху становится не видно совсем. Как посоветуете исправить?