cssing Архив » CSS1k

CSS1k

Fun, XHTML/CSS

Мы с genn не выдержали и сделали свою версию для этой галереи.

Для тех кто не в теме, задача такова: у нас есть фиксированный html, мы к нему можем написать не более 1024 байт CSS кода, без скриптов и картинок, только CSS. Вот какие красоты получаются у людей.
Не удержались и мы. Однако наш красивый дизайн, примерно такой:

в итоге занял почти 2 килобайта (О УЖАС!)

Аж 1834 байта. После чего я сыграл в игру «challenge accepted» и забыл пообедать.

Рассказать о том что было дальше трудно, лучше приложу скриншот нашего с genn чата:

Очень хорошо видно когда у меня пропал евпаторийский интернет :)

Жертвуя красотой дизайна и используя селекторы вроде:

1. header~a{/*…*/}
2. ul li,[role]>*>*:not(h2),ul li:hover a{/*…*/}
3. [role]>*+*+*:hover{/*…*/}

Мне и Гене таки удалось свести дело к 1000 байт.
Вобщем, это было весело :).

Самое удивительное и любопытное, что я изначально писал сжатый CSS-код, и после того как я начал оптимизировать его, только без жертв дизайна удалось удалить 30% файла. И это не считая пробелов, и не считая упрощения дизайна — исключительно сокращение кода.

Впрочем, каждые сто байт оптимизации казалось что дальше уже некуда :)

В итоге за полдня родились Bbubles.
Возможно таки удастся подчистить еще пару десятков байт чтобы добить красоту :)

Буду рад советам, и вашим собственным вариантам дизайна.

• Итоговый CSS на Github
• Живой пример Bbubles (лучше всего в Сафари и Хроме, ну как всегда)
• Отчет в блоге Genn.org

В завершение, несколько советов тем кто захочет поучаствовать в галерее.

Не бойтесь если у вас получилось 2kb

Мы все сильно недооцениваем то насколько наш код можно упростить. ;) Лучше отнеситесь к этому как к сложной задаче и попробуйте решить. Обычно в таких случаях абсолютно неважно добьетесь ли вы 1000 байт, но вы узнаете много нового и получите кайф =)

Где упрощать?

1. Группировать длинные свойства. Например, text-decoration или position:absolute стоит собрать в одном месте: div,p,section{position:absolute}
2. Использовать крутые селекторы вместо обычных. Например вместо article section p,article section ol можно написать: [role]>*>*:not(h2)
   А вместо section:last-child
[role]>*+*+*
3. Вместо px использовать em. Запись 5em короче чем 50px
4. Короткую запись для цвета. Очевидно #f3f5f8 длиннее чем red или #fff
5. А еще, часть свойств из CSS можно просто удалить и ничего не изменится, мы же делаем под современные браузеры.

Оптимиизировать свой CSS очень интересно :)

Fun, XHTML/CSS