CSS-2

CSS-2

CSS Part 2

Какво ще разгледаме днес:

Images (icons)

Ако един уебсайт има много (5+) икони е добре да не правим отделни заявки за всяка от тях. Има няколко популярни начина за решаване на този проблем.

CSS Sprites

CSS Sprites Demo

Други подходи

Малко селектори

Pseudo селектори

CSS3 Basic Features

CSS3 Basic Features Demo

Browser prefixes

  • background: -moz-linear-gradient(black, white); /* FF 3.6-15 */
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10-25 */
    background: -o-linear-gradient(black, white); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE9 */
    background: linear-gradient(black, white); /* the standard */
  • Box Model Again

    CSS3 Advanced Features

    CSS3 Layouts

    CSS3 ни дава 2+ нови layout модела

    1. Flexbox (complete guide)
      • Предоставя доста флексибилност в подреждането на елементи в контейнер (едномерно)
      • Само IE и стари андроиди имат проблеми с него
    2. Grid (complete guide)
      • С него почти всяка прост html може да се визуализира по множество начини в 2d пространството
      • 87-92% browser support за повечето функционалности от браузърите не го поддържат, но голяма част от браузърите още имат проблеми с някои по-интересни и полезни пропъртита свързани с него (например display: contents - 4 - 88%).
    3. Multicolumn - колони за текст, не се използва особено заради мобилните устройства

    Flexbox intro

    Responsive design

    Как да оптимизираме писането на HTML и CSS

    CSS препроцесори - SASS / LESS

    Пример за променливи

    Пример за mixin

    Debug

    Stylebot Chrome Extension

    Задача

    Въпроси