CSS1k

6 July, 2011

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.
Возможно таки удастся подчистить еще пару десятков байт чтобы добить красоту :)

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

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

Не бойтесь если у вас получилось 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

17 комментариев к “CSS1k”

mega.genn.org » Bbubles — короче 1024 ббайтов | 1. 6 July, 2011

[…] в 130% ;) Какие-то секреты верстки, наверное, раскрывает в своем посте Юра. В общем, повеселились от души и получили хороший […]

Sam | 2. 6 July, 2011

Красота!

Alex | 3. 6 July, 2011

Очень красиво получилось.
А где можно почитать про эти “крутые” селекторы?

akella | 4. 6 July, 2011

http://www.w3.org/TR/css3-selectors/ например? :) Это самый полный и c описаниями вариант.

Михаил Якименко | 5. 6 July, 2011

Хех. Круто!

Михаил Якименко | 6. 11 July, 2011

почитав спецификацию.. Новые css селекторы не логичны.. имхо конечно.

Софья | 7. 11 July, 2011

Я с ума схожу от вашего умения так быстро решиться и сделать.
Получилось действительно круто. Пока ваш мне больше всех понравился. Самый необычный и приятный. Ещё понравися Sourcy и Facetime.

Павел | 8. 15 July, 2011

нафига сжимать ксс, кешируется браузером…

akella | 9. 16 July, 2011

Зачем соревноваться в беге – если можно ездить на машине?

Towave.Ru | 10. 2 August, 2011

Очень интересные приемы. Возьмем на заметку. Спасибо.

Mediaproduct | 11. 16 August, 2011

Оптимизация ради оптимизации? Прикольно, чо :)

Юра | 12. 12 September, 2011

Действительно потрясающая работа! Вы молодцы, ребята.

Просмотрел все варианты оформлений других участников и могу искренне сказать, что ваш и ещё несколько других (уже не помню как называются) понравились больше остальных.
(Очень напрягло отсутствие стилей для посещённых ссылок в большинстве работ :) Переключать дизайны, отыскивая посещённые было сложно. Хотя это замечание, конечно, может и не совсем уместно, учитывая условия проекта)

Посмотрел ксс и понял, что я ничего не знаю про него, оказывается (даром, что вроде тоже вёрсткой занимаюсь).

Вдохновлён, заинтересован, пошёл читать инфу по ссылке ;-)

Тарас Лавка | 13. 24 September, 2011

интересная заметка, спасибо

Александр | 14. 12 February, 2012

Без JS ваши дивы не увеличились бы, я прав?)

akella | 15. 12 February, 2012

Нет, не прав :) Это css-анимации.

Александр | 16. 12 February, 2012

А зачем там подключен JQuery?)

css-анимации это css3?

Александр | 17. 12 February, 2012

Можно не отвечать )

Оставить комментарий