Must-knows and common mistakes in theming. Kate Kalashnikova.
Transcript of Must-knows and common mistakes in theming. Kate Kalashnikova.
Курс молодого бойца: must-knows и основные ошибки в верстке.
Kate Kalashnikova
Не торопитесь начинать
➔ Ознакомьтесь с требованиями проекта
➔ Внимательно посмотрите на дизайн всех страниц
➔ Найдите схожие элементы (блоки, шрифты, формы)
Вы - команда!
Choose basic theme
@font-face
★ http://www.fontsquirrel.com/★ http://www.font-face-generator.com/★ http://convertfonts.com/
Основные ошибки
1. Выбор селекторов: отсутствие стилей или их появление там, где не надо
2. Line-heights: обрезанные буквы3. Links and buttons hover effects4. Floats: “схлапывание” родительского элемента5. Забыли про элемент вообще6. Разметка файлов 7. Свойства с приставками -o-, -moz-, -webkit-
Выбор селекторов
Links and buttons
Wrong!
Right!
Sprites
An image sprite is a collection of images put into a single image.
floats
Clearfix
Общие правила оформления css файла:- Всегда используйте для отступа два пробела. - Всегда пишите в нижнем регистре. - По возможности поясняйте свой код, где это необходимо.- Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно. - Избегайте использования информации о версии браузеров, или CSS “хаков”— сначала попробуйте другие способы.- Используйте пробелы после двоеточий в объявлениях.- Начинайте каждый селектор или объявление с новой строки.
Cross browser Quality Assurance
Нормальные браузеры // Inline blocksdiv {
*display: inline;*zoom: 1;
}
// Horizontally and vertically centered element.div1 {
position: relative;}.div2 {
*position: absolute;*top: 50%;*left: 50%;
}.div3 {
*position: relative;*top: -50%;*left: -50%;
}
IE7 // Inline blocksdiv {
display: inline-block;}
// Horizontally and vertically centered element.div1 {
display: table;}.div2 {
display: table-cell;text-align: center;vertical-align: middle;
}
Logged-in Logged-out
https://docs.google.com/spreadsheet/ccc?key=0AnOBnENtFCXWdGlzaVk3N2RwT0FhSnJ2b2owMVJYclE&usp=drive_web#gid=0
Testing table