Поради, хитрості і прийоми верстки css і html
Це ікона CSS Edit 2, хоча в статті не буде ні слова про CSS Edit 2
Для початку, пара провокаційних порад:
1. Прийшов час припинити підтримку Internet Explorer 6
Більшість розцінює CSS3 тільки як можливість зробити закруглені куточки і додати тінь. Але, насправді, можливостей набагато більше: завантажувані шрифти, outline, транформации, flexible box layout, багатоколонкові верстка, текстури для контурів, медіа-апроси і багато-багато інших надзвичайно корисні штуки.
Хоча CSS3 ще в розробці, більшість сучасних браузерів вже підтримують основні можливості, часто з префіксами (наприклад: -moz-border-radius і -webkit-border-radius для Firefox і Safari / Chrome соотвественно).
Не варто забувати, що за статистикою велика частина користувачів досі користується браузерами, що не підтримують CSS3 (всі версії Internet Explorer). Але починати застосовувати CSS3 варто вже зараз.
3. Скидання CSS (CSS Reset)
Причиною появи так званих скидів CSS стало те, що відображення елементів не стандартизовано і в різних браузерах (і навіть в однакових браузерах на різних системах) вони можуть виглядати по-різному. CSS Reset встановлює значення параметрів для всіх елементів в однакову стан. В наслідок чого, досягається кращий контроль над стилями і виникає набагато менше проблем з кросбраузерністю, і, як не дивно, зменшується обсяг коду. Я використовував CSS Reset на трьох останніх проектах і планую використовувати далі.
Як виявилося, я і раніше використовував скидання CSS, але він був дуже простий і тільки для відступів:
Зараз використовується мною метод набагато складніше і об'ємніше, його можна побачити в моїй вики на сторінці CSS Code Style. Так, це найвідоміший CSS Reset, запропонований відомим експертом по CSS Еріком Мейер.
Ще є всякі CSS-фреймворки, але, мене влаштовують мої теперішні прийоми верстки і мені поки ніколи з ними розбиратися. Можливо, через місяць-другий, у мене знайдеться час спробувати, і, я в черговій статті буду розповідати наскільки це круто і зручно. Настійно не рекомендую починати вивчення CSS з фреймворків.
4. Спосіб так званої «очищення потоку»
Для того щоб зовнішній контейнер (блок, в якому знаходяться інші блоки) повністю «обтягав» вкладені плаваючі блоки, я використовую наступні спосіб:
Застарілі способи «очищення»:
Стиль overflow. hidden; для контейнера (для IE буде потрібно додати height. 1%;). C overflow треба бути обережніше, тому що він приховає всі елементи не помістилися в блок, для якого він заданий.
Найстаріший, і не дуже гарний спосіб - в кінці зовнішнього контейнера додається
5. Коли потрібно приліпити «підвал» до нижньої частини сторінки
HTML буде такою:
Стилі, для «підвалу» висотою в 40 пікселів:
Тут властивість font-weight у елемента p по-замовчуванням дорівнює normal. а колір тексту color був уже заданий глобально для body. і успадковується для всіх вкладених елементів.
16. Використовуйте CSS-спрайт
CSS-спрайт - це картинка складається з кілька картинок, які за допомогою background-position можна привласнити різних елементів.
Використання спрайтів зменшує кількість запитів і збільшує швидкість завантаження сторінок. Спрайт - це дуже корисна штука, гідна окремої статті. Писати я її не буду, так як за запитом в Гуглі «CSS спрайт» виводиться дуже багато докладних статей.
17. Намагайтеся використовувати відносні розміри шрифтів в em і%
Зараз я завжди використовую наступний спосіб завдання розміру для шрифтів: body
У решти елементів розмір задаю або відсотками або em-ами. При цьому, font-size. 130% буде дорівнює 13 пікселям. 7em - відповідно, 7 пикселям.
Те ж можна застосувати і до відступами, а то й потрібно попиксельного збіги макета і верстки. Тоді при збільшенні масштабу сторінки відступи будуть збільшуватися разом зі шрифтами.
18. Не варто писати в стилях одиниці виміру для нульових значень
Одиниці виміру для значення довжини обов'язкові, крім двох випадків: line-height і нуля. Ну з нулем все зрозуміло - нуль він і є нуль, немає ніякого сенсу писати після нього одиницю вимірювання. А для line-height будь-яке число без знака буде сприйматися як множник від розміру шрифту. Наприклад, значення 1.5 встановить полуторний міжрядковий інтервал.
Зверніть увагу як виглядає сайт і чи всі посилання працюють з вимкненими скриптами, чи немає білого тексту на білому тлі через відключені картинок.
20. Пошук помилок
Елементарне засіб пошуку помилок:
29. Розробіть свій, так званий Тулбокс
Тулбокс - набір часто використовуваних стилів. Для прикладу, тулбокс від CSS-tricks. У кожного він свій.
31. Варто робити код простіше
Найчастіше можна обійтися одним дивом замість двох, трьох або декількох вкладених. Часто зустрічаю величезну кількість вкладених Дивов, які були зроблені «на всякий випадок», але потім не використовуються.
33. Вивчайте чужий код
Саме вивчайте, а не бездумно копіюйте не роблячи навіть спроби розібратися.
Я років 5 назад вивчив код CSS сайту mozilla.org (і ще багатьох інших, яких вже не пам'ятаю) вздовж і впоперек, дуже вже він мені здавався ізяшним і навороченим. Дуже багато мені звідти в нагоді в подальшому.
34. Підпишіться на RSS популярних блогів по веб-розробці
35. Колекціонуйте шаблони коду
36. Вивчайте jQuery.
37. Використовуйте семантичну верстку
38. Не варто занадто ганятися за стандартами
Тут думки часто розходяться, я перебуваю на стороні тих хто говорить, що головний валідатор - це браузер. Валідація заради шильдіка «Valid XHTML # 038; CSS »- зайва трата часу, та й валідатори помиляються. Стандарти варто знати і намагатися їх дотримуватися, але без фанатизму.
39. Почитайте про SEO-оптимізацію
Кожен верстальник повинен знати як оптимізувати сайти.
40. Стежте за дизайнером
Намалює адже - а нам верстати! Насправді це, звичайно, жарт, але частка правди в ній все-таки є.
Взагалі, давайте поради всім хто в них потрібно - справжній професіонал завжди ділиться своїми знаннями з іншими.
41. Корисні посилання
Консорціум Всесвітньої павутини (W3C) - там роблять інтернет. Оооочень багато корисної інформації (правда, на буржуйському). Там же можна знайти валідатор.
Таблиця сумісності браузерів.
Хабрахабр. Ну якщо ви ще не знаєте про це сайті ...
Дякуємо. Твої старання не пройшли дарма.