У цій статті розглянемо деякі практичні прийоми для написання більш красивого, правильного і швидкого CSS. У статті буде розглянуто використання коротких властивостей, глобальні скиди, тулбокси і деякі корисні скрипти, які швидше за все полегшать вам життя.
короткі властивості
Якщо значення кольору складається з трьох пар однакових символів, то це значення можна скоротити до трьох символів.
Значення таких величин як padding або margin можна задавати по різному. Бувають люди, які пишуть ось так:
Це довго і некрасиво. Можна задавати відразу кілька значень за один раз, і для цього існує кілька способів.
До речі, можна використовувати слово TRouBLe (Top, Right, Bottom, Left), щоб простіше запам'ятати порядок в останньому варіанті.
Скажімо, задаєте обведення для якогось елементу ось так:
Все це добро можна скоротити ось так:
З фоном буває ось така ситуація:
Все це можна вмістити в одну строчку:
Так само важливо пам'ятати, що якщо ви вказуєте два значення координат, то вони повинні слідувати одна за одною. При цьому, якщо ви використовуєте em, px або відсотки, то горизонтальне значення йде першим.
Можна зробити маленький шматок:
Тут з такого опису:
Можна зробити ось таке:
Глобальні скиди і тулбокси
Як ви знаєте, дефолтні значення деяких властивостей в CSS відрізняються від браузера до браузеру, і це є постійним головним болем HTML кодерів (не рахуючи IE, який просто одна велика скалка в одному місці). Що б це виправити, були придумані так звані «скиди CSS» (css reset). Перший і найвідоміший з них був запропонований визнаним експертом по CSS Еріком Мейер. До всього іншого, ми вже писали про глобальні скиди, так що ви можете подивитися і інші приклади.
Тепер розглянемо тулбокси. Грубо кажучи, це набір стилів, які ви найчастіше використовуєте при верстці. Для прикладу розглянемо ось такий невеликий тулбокс від CSS Tricks.
Бажано, щоб у вас був свій власний тулбокс - так воно зручніше і краще.
Класи для браузерів і ОС
Знову ж, всі ми знаємо, що деякі властивості CSS по різному відображаються в різних браузерах. Що б виправити, використовують різні CSS хакі.
Але недавно на Хабре з'явилося відмінне рішення, яке дозволяє визначати стилі під будь-який броузер або ОС.
І тепер у нас є класи для операційних систем:
- .win - Windows;
- .linux - Linux;
- .mac - MacOS.
І класи для браузерів:
- .ie - всі версії ІЕ;
- .ie8 - ИЕ 8.х;
- .ie7 - ИЕ 7.x;
- .ie6 - ИЕ 6.x;
- .ie5 - ИЕ 5.x;
- .gecko - всі версії Фаерфокса і інші Гекко-браузери;
- .ff2 - Фаерфокс 2;
- .ff3 - Фаерфокс 3;
- .opera - всі версії опери;
- .opera8 - опера 8.x;
- .opera9 - опера 9.x;
- .konqueror - konqueror;
- .safari - сафарі.
Т. е. Якщо ви хочете для сафарі під виндой у всіх блоків зробити текст червоного кольору, то потрібно написати ось так:
стиснення CSS
Після того, як ви написали гарний CSS, прийшов час зменшити його в розмірах. Це дозволить вам трохи скоротити трафік між сервером і браузером і, відповідно, прискорити завантаження сторінки.
До приклади, на Временно.нет автоматично збираються всі CSS файли (у нас їх 4) і стискаються за допомогою бібліотеки CSSMin.