Современный CSS для динозавров. Использование CSS для разметки

Внедренны й (Embedded) — код «внедрен» в заголовок документа. Он влияет только на страницу, в которую «внедрен».

1

Внешний (External) — таблицы стилей создаются в отдельном документе. Затем они связываются с другими веб документами и оказывают влияние на любой связанный с ними документ.

1

Существуют 15 лучших приемов работы с CSS.

Соблюдайте порядок

Соблюдение определенного порядка требует затрат, но дает положительный эффект. Это особенно важно при использовании CSS. Вместо того, чтобы записывать коды в том хаотическом порядке, в каком они пришли вам на ум, гораздо лучше организовать хранение кодов по определенной схеме.

Начинать следует с наиболее общих и менее важных пунктов, продвигаясь к более важным. Такой подход создает логическую структуру, облегчающую будущие редактирования CSS. Использование простых схем и структур полезно не только для будущих редактирований, но также и для будущих разработчиков.

Избегайте встроенных CSS

Хотя встроенные CSS полезны для некоторых применений, по некоторым специфическим причинам их следует избегать. Одним из главных доводов является то, что встроенные стили не отделяют контент от конструкции. Это делает проектирование и развитие затруднительным. Другой довод — этот стиль труднее поддерживать.

При необходимости внесения изменений в код встроенного стиля, эти изменения должны будут сделаны на каждой странице, где он содержится. И, наконец, встроенные стили CSS не просты в понимании и увеличивают размер страницы.

Разделяйте контент от дизайна

Одним из главных доводов в пользу использования CSS является раздельное хранение кодов и HTML — это облегчает верстальщику их нахождение и обслуживание. Это хорошее решение, особенно учитывая тот факт, что верстальщик веб-сайта не обязательно является и разработчиком его контента.

Дата, заголовок и подпись

Когда возникает необходимость выяснить что-то о CSS, комментарии, расположенные в верхней части кода, могут быть реально полезными. Особенно при проектировании тем и шаблонов для других. Также является хорошей практикой добавление кода образца цвета в начало кода. Это сэкономит массу времени для редактирования и изменений. Не нужно будет выяснять код цвета. Все, что нужно сделать — скопировать его.

1 /*====== 2 Onextrapixel Team 3 Copyright 2011 OXP 4 Written for - www.onextrapixel.com 5 6 swatch colors 7 ------------- 8 13437a - dark blue 9 1d74be - mid blue 10 e1e1e1 - light gray 11 a3a4a4 - mid gray 12 8a8a8a - gray 13 ======== */

Сохраняйте библиотеку шаблонов

Если какая-то структура часто используется, почему бы не сохранить ее копию? Это позволило бы в аналогичной ситуации в следующий раз не начинать все с нуля. Для этого извлеките все коды, которые не являются общими, и сохраните файл как шаблон CSS для дальнейшего использования.

Используйте сокращения CSS

Для быстрой загрузки таблицы стилей и сохранения времени используйте сокращения при кодировании CSS. Этот хороший прием кодирования CSS сделает таблицу стилей аккуратной и понятной.

Вместо этого:

Вам следует написать это:

1 #crayon { 2 margin: 8px 7px 0px 5px; // top, right, bottom and left values respectively. 3 }

Используйте полезные приемы именований

Как уже отмечалось ранее, одним из лучших доводов для использования CSS является возможность отделения стилей от контента. CSS действительно упрощает перепроектирование сайта без затрагивания HTML. Если элементы названы так, что их трудно будет отличить в будущем, то это создаст вам некоторые трудности и дополнительную трату времени. Необходимо использовать простые, но в тоже время понятные именования соответствующих элементов. Не в коем случае не называйте столбец как «столб-левый», так как при последующих операциях можно перепутать где находится часть кода, отвечающая за контент, а где непосредственно за верстку.

Используйте дефис вместо подчеркивания

При использовании старых версий браузеров CSS сбоит или не работает вовсе, если используются подчеркивания. Использование дефиса вместо подчеркивания приводит к лучшей совместимости с ранними версиями браузеров и к меньшим сбоям.

Не повторяйтесь

Один из лучших приемов CSS, делающих вашу жизнь легче - использовать короткую запись там, где возможно. Всегда ищите способы, чтобы сгруппировать похожие элементы, которые могли бы использовать те же самые размер шрифта, поля и цвет. Имейте четкое представление того, как CSS будет интерпретировать эти короткие пути. Порядок его просмотра подобен движению часовой стрелки от 12 — верх, право, низ и потом влево.

Более эффективно, чем это:

1 h1 { 2 margin: 1em 0 2em 0; 3 font-size: 1em; 4 color: #222; 5 } 6 7 h2 { 8 margin: 1em 0 2em 0; 9 font-size: 1em; 10 color: #222; 11 }

Избегайте использования действительно больших изображений

Использование больших изображений в качестве фона веб-страницы будет увеличивать время загрузки страницы. Хорошим решением будет использовать небольшие изображения, и если возможно, замостить ими с помощью возможностей CSS, где это необходимо.

1 body { 2 background:url(bg.jpg) repeat-x; 3 }

Избавляйтесь от излишеств кода

Использование некоторых из приведенных выше советов действительно поможет сократить размер таблицы стилей. Это приведет к более быстрой загрузке страницы. Кроме того, меньшая по размеру таблица стилей легче для сопровождения и обновления. Всегда удаляйте излишние коды и объединяйте, где возможно.

Другой прием для уменьшения таблицы — не определять ноль как единицу измерения. Если поле должно быть установлено на 0, то нет необходимости писать 0px или 0cm. CSS поймет, что 0 есть ноль, независимо от единицы измерения.

Проверка CSS

Если при компиляции кода возникают ошибки, то необходимо затратить время на их поиск и исправление. Для экономии времени используйте программу W3C CSS Validator, помогающую обнаружить некоторые самые распространенные ошибки в CSS. Это бесплатное и очень удобное средство.

Используйте функцию Reset CSS

Используя Reset CSS, можно будет избежать несоответствия разных браузеров. На практике это важно для удаления полей, которые несовместимы, также как и других несовместимостей атрибутов, что приводит к тому, что веб-страницы выглядят по-разному на разных браузерах. С помощью функции Reset CSS вы добьетесь единообразия страниц при использовании различных браузеров.

html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } 2:focus { outline:0; } 3 body { line-height:1; color:#000; background:#fff; } 4 ol,ul { list-style:none; } 5 table { border-collapse:separate; border-spacing:0; } 6 caption,th,td { text-align:left; font-weight:normal; }

Пишите сначала для Gecko, а потом настраивайте для IE и Webkit

Обычно, если CSS правильно работает для Gecko браузеров (Netscape, Firefox Mozilla, Camino, Flock), весьма вероятно, что он будет нормально работать с другими браузерами — IE and Webkit (Safari, Chrome). Для экономии времени и нервов при попытках выяснения ошибок в кодировании, лучше начинать с написания CSS для Gecko браузеров.

Проявляйте аккуратность

Хорошей привычкой будет хранить отдельно друг от друга специфичные для браузеров таблицы стилей, включая JavaScript, условные комментарии и коды со стороны сервера, необходимые для этого.
Метод отлично подходит для избежания хакерских атак на основные таблицы стилей.
Это крайне необходимо также для поддержания управляемости CSS.

Заключение

В использовании CSS есть много преимуществ. Он не только позволяет сделать страницы быстро загружаемыми, но и при использовании приведенных выше 15 лучших приемов CSS делает легче не только вашу жизнь, но и проектирование и редактирование тем и шаблонов. Применение CSS дает преимущества при работе с Google. Поисковик придает больший вес контенту, находящемуся в верхней части HTML-документа. Когда «пауки» поисковых систем сканируют HTML веб-сайта, они просматривают контент, идущий первым. Используя CSS, легко создать схему, где первым появляется контент, а затем следует остальной исходный код страниц.

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

Данный раздел построен по принципу пошагового изучения материала, поэтому перед каждым названием урока по HTML и CSS, стоит цифра соответствующая порядковому номеру урока. Это естественно на тот случай если вы хотите изучить все от самых основ и не сделать себе кашу в голове. Если же вы уже знаете, что-либо о языках HTML и CSS, то вы так же можете найти здесь недостающие вам знания, или же, углубить уже изученное.

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .

Наверное, каждый человек, который хоть раз в своей жизни сталкивался с созданием сайта, безусловно, слышал о такой связке как html и css я могу с уверенностью заявить, что если вы хотите делать сайты самостоятельно, то вам ни как не обойтись без знаний этих двух вещей.

После того как вы получили общие понятия о том, что такое html у вас в голове, явно сложилась неоднозначная картина, и я думаю это не удивительно. Пора переходить непосредственно к практике и создать-таки свой первый html документ.

Как и в языке html, так и в CSS есть свои особенности, правила и структура. В этом уроке я расскажу вам об основных понятиях языка CSS, о его структуре, устройстве и мы сделаем с вами первую CSS таблицу стилей и узнаете, как подключить таблицу стилей к html документу.

Селекторы в CSS являются основой самого языка и их изучение и понимание очень важно, поэтому в этом уроке я вам расскажу еще о нескольких видах селекторах и опишу их возможности.

Очень важным моментом в создании сайта, является работа с текстом, и как вы понимаете, с текстом в html так же необходимо уметь работать, и знать какие теги бывают и как их можно использовать.

После того как вы узнали все html теги для работы с текстом, теперь пора перейти непосредственно к CSS работе с текстом, которая уже значительно расширит ваши познания и возможности.

В CSS огромное количество всевозможных удобных и качественно меняющих внешний вид свойств и мы продолжаем изучать CSS работу с текстом и в этом уроке, мы углубимся в тему работы с текстом и рассмотрим новые свойства текста.

Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.

CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Логотипы на чистом CSS

Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

От Автора: Касаемо CSS в Сети полно ресурсов и мнимых “полезных советов экспертов”. Они от непроверенных, самопровозглашенных “гуру”, не признанных в мире веб-дизайна. Так как они могут быть похожими на правду, то откуда нам узнать, что совет по CSS – это надежный источник или непроверенное, на «скорую руку» слепленное решение?

Вместо того, чтобы полагаться на неизвестные источники в поисках рекомендаций, давайте вдумчиво рассмотрим тех разработчиков, которые имеют прекрасную дизайнерскую подготовку и прошли этот путь до конца. Эти CSS-советы собраны у самых уважаемых разработчиков планеты. В подтверждение своих рекомендаций они имеют портфолио, так что каждый грамм информации в них – самого лучшего качества.

Ниже приведены 10 отличных CSS советов , которые любой веб-разработчик или дизайнер может признать полезными, содержательными или стимулирующими. Рассмотрите эти мудрые рекомендации от квалифицированных профессионалов, которые прошли длительный и сложный путь к непревзойденному мастерству дизайна. Это – настоящие мастера CSS. Отведайте глоток их знаний и примените их знания в своем очередном дизайн-приключении.

1. Ваш CSS должен быть простым – Peter-Paul Koch (Питер-Поль Кох)

Что меня больше всего достает в складе ума дилетантов от CSS – то, как активно они ищут непростых решений. Ищите, и обретете, и если хотите сложностей, они станут вам поперек горла. Не отстанут от вас, а также и не помогут вам.

Питер-Поль Кох – крестный отец веб-разработки. Так как он является разработчиком старой школы и основная масса образцов в его портфолио пришлась на 1998-2002гг., он работал с такими тяжеловесами, как Apple. Он написал книгу по javascript, но даже и секунды не думайте, что ему нечего сказать о CSS.

Опасность CSS хаков.

Кох говорил о том, что каждый дизайнер и веб-разработчик должен усердно следовать правилу: Ваш CSS должен быть простым. Добиться простоты нелегко, особенно в CSS-дизайне. Можно найти несчетное множество особенностей реализации CSS в конкретном браузере, при помощи CSS-хаков во всех браузерах станицы выглядят одинаково, невзирая на версию или тип. Однако использование множества CSS-хаков имеет существенный недостаток. Поскольку веб-браузеры развиваются, так гораздо труднее успевать за переменами.

Кох высказывает интересное соображение по поводу разработки Сети. Интернет в целом очень непредсказуемое место, и попытки спрогнозировать направление его работы в будущем – весьма невыгодная линия поведения.

Сеть – это очень неопределенное пространство. Вы никогда не можете быть уверены в том, что ваши веб-сайты станут работать именно так, как вы хотите, даже если вы применяете все современные методы CSS, доступность и простоту использования. Вместо поиска ложного удобства в хакерских приемах, которые кажутся тем более удобными из-за своей степени интеграции, вы должны принять в качестве основного правила неопределенность.

Браузеры не поддерживают CSS в совершенстве; это может привести в бешенство, особенно тех, кто только начал изучение CSS. Несмотря ни на что, CSS-хаки – это не решение проблемы. Принятие того пути, по которому сейчас идет работа Сети – лучшее, что можно сделать, потому что так ваши сайты останутся простыми.

Питер-Поль сделал ударение на том, что кажется верным не только для CSS, но и для веб-разработки в целом. Простота – это ключ к эффективному кодированию.

2. Выполняйте CSS-объявления в одной строке – Jonathan Snook (Джонатан Снук)

Джонатан Снук – невероятно популярный разработчик из г. Оттава (Ottawa) в Канаде, сделавший себе имя в сетевых стандартах и дизайне. Он выступал на престижных конференциях типа SXSW и опубликовал несколько технических ресурсов по дизайну на Sitepoint.

Одна из постоянных идей Джонатана в кодировании CSS состоит в том, чтобы ставить объявления в одну строку.

Разбиение на части может выглядеть более привлекательным, но, конечно, не помогает ничего найти. При поиске чего-либо в таблице стилей самое главное – это массив правил (т.е. часть перед { and }). Я ищу элемент, id или класс. Расположение всего в одной строке делает просмотр документа намного более быстрым просто оттого, что вы больше видите на одной странице. Когда я нашел массив правил, который искал, найти нужное мне свойство обычно уже несложно, так как их редко бывает слишком много.

Джонатан продолжает свою мысль, давая пример объявлений одной строкой, которая выглядит так:

Хорошо

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Плохо

h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; }

Этот подход не только позволяет быстро просматривать ваш CSS, но также поможет сделать ваш CSS-файл маленьким по размеру за счет удаления ненужных пробелов и символов.

3. Используйте сокращения CSS – Roger Johansson (Роджер Йоханссон)

Большинство людей знают и используют некоторые приемы сокращенной записи, но многие не используют в полном объеме эти возможности, экономящие пространство.

Роджер Йоханссон знает кое-что о разработке Сети. Шведский веб-дизайнер работает с Интернетом с 1994 и имеет популярный блог о веб-дизайне. Если речь идет о простых и элегантных решениях, то Роджер — один из самых хорошо осведомленных людей в этой области.

Йоханссон написал очень исчерпывающую статью о важности сокращений CSS и дает довольно много примеров того, как их использовать в процессе кодирования CSS. Вот один из примеров:

Использование сокращенной записи для свойств может сэкономить много места. Например, чтобы выставить разные margin для сторон блока, можно использовать это:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Но вот это же самое гораздо более эффективно:

margin:1em 0 2em 0.5em;

Тот же самый синтаксис используется и для свойства padding.

Так как скоропись CSS сокращает размеры таблицы стилей, она также помогают организовать и поддержать код несложным. Красивый CSS – это простой CSS.

4. Дайте возможность блочным элементам естественным путем заполнить пространство – Jonathan Snook (Джонатан Снук).

У мистера Снука есть еще одна ключевая рекомендация, которой должен жить каждый веб-разработчик: дайте возможность блочным элементам заполнить пространство как можно более органически. Если и есть постоянно повторяющаяся тема при разработке CSS, то она звучит так: не заставляйте код делать те вещи, для которых он не предназначен. Это означает избегать CSS-хаков, находя наиболее простые решения.

Мое практическое правило заключается в следующем: если я устанавливаю ширину, я не определяю margin или padding. Таким же образом, если я устанавливаю margin или padding, я не определяю ширину. Работать с блочной моделью иногда такое мучение, особенно если вы имеете дело с процентами. По этой причине я устанавливаю ширину контейнеров, а затем margin или padding для элементов внутри них. Обычно это проходит гладко.

Правило Джонатана очень хорошо для того, чтобы убедиться в том, что ваша разметка не поломается, а еще этот простейший подход используется при создании разметок с блочными элементами.

5. Устанавливайте и сбрасывайте float – Trevor Davis (Тревор Дэвис)

Float, возможно, одна из самых важных вещей, которые нужно понять в CSS, но знать, как сбросить float (clear)– так же необходимо.

Тревор Дэвис, может быть, и не такое великое имя в мире веб-дизайна, как Зельдман (Zeldman) или Снук (Snook), но он, конечно, заслуживает упоминания в связи со своим великолепным портфолио веб-разметок. Его блог – прекрасный ресурс для любого веб-разработчика, желающего избавиться от мусора.

Сбрасывайте float

В свою основную статью «6 Важнейших методик CSS, которые нужно знать», Тревор добавил настоящий самородок, который может спасти от головной боли при использовании столбцов в разметке.

Я создал простую страницу с двумя свободно перемещающимися столбцами рядом. В примере вы заметите, что серый фон не вмещает эти столбцы. И самое простое, что можно придумать – это сделать содержащий элемент также плавающим. Но сейчас вы видите, что фон контейнера не вмещает область контента.

Так как контейнер имеет margin: 0 auto, мы не хотим его делать плавающим, потому что это будет уводить его в сторону, от места, где он должен быть. Так что, другой способ ограничить плавающий объект – это вставить ограничивающий элемент. В этом случае я просто использую пустой div, установленный на clear: both. В настоящее время имеются другие способы очистить плавающий объект без разметки, но я заметил некоторую противоречивость этого приема, так что я просто жертвую пустым div’ом.

6. Используйте отрицательный margin – Dan Cederholm (Дэн Сидерхолм)

Иногда легче иметь дело с исключением из правила, чем добавлять объявления ко всем остальным элементам вокруг него.

Компания Дэна Сидерхолма SimpleBits — это энергичная команда дизайнеров. Дэн работал с:

… и множеством прочих выдающихся веб-компаний. К счастью, Дэн передает знания, полученные при работе с этими грандиозными именами, в своем блоге на SimpleBits. Вот практический метод для вас, веб-дизайнеры и разработчики: если Дэн Сидерхолм что-то говорит, вы слушаете. Считайте его цифровым проводником-шерпом, ведущим вас к вершине вашей дизайнерской горы.

Отрицательные margin

В то время, как может казаться алогичным поставить отрицание впереди любого объявления (как margin-left: -5px), в действительности это довольно хорошая идея. Мистер Сидерхолм объясняет, что использовать отрицательные поля для элементов иногда легче, чем изменить каждый аспект дизайна для выстраивания так, как вам нужно.

Бывают ситуации, когда использование отрицательных полей для элемента – самый простой способ «вытолкнуть» его из остальных, рассматривая как исключение из правила для того, чтобы упростить код.

7. Используйте CSS для центрирования разметки – Dan Cederholm (Дэн Сидерхолм)

«Как я центрирую разметку с фиксированной шириной, используя CSS?» Для тех, кто знает, это просто. Для тех, кто нет, нахождение двух необходимых для завершения работы правил может стать разочарованием.

Неудивительно, что Дэн собирается дважды сделать этот перечень. Центрирование разметки при поверхностном рассмотрении очень простая идея, но по некоторым причинам она не всегда работает настолько легко, как должно работать. Центрирование разметки при помощи CSS может стать тщетной попыткой для новичка, если он никогда раньше этого не пробовал.

У Дэна есть старый и проверенный метод, который он часто использует для того, чтобы достичь идеального состояния центрированной разметки.

#container { margin: 0 auto; width: xxxpx; text-align: left; }

Многие современные дизайнеры полагаются на центрированние разметки, так что использование этого готового метода пригодится веб-разработчикам и дизайнерам.

8. Используйте правильный DOCTYPE – Jeffrey Zeldman (Джеффри Зельдман)

Вы написали эффективный XHTML и CSS. Вы собираетесь использовать W3C-стандартный Document Object Model (DOM) для управления динамическими элементами страницы. Однако в браузерах, созданных для поддержки тех самых стандартов, ваш сайт падает. Винить в этом, скорее всего, придется неправильный DOCTYPE.

Джеффри Зельдман – один из основателей прекрасного ресурса, сайта A List Apart, учредил и управлял The Web Standards Project, управляет студией дизайна Happy Cog и даже написал книгу по проектированию для веб-стандартов. Короче говоря, Зельдман принадлежит к избранным веб-дизайнерским кругам.

Неверное представление о DOCTYPE

DOCTYPE веб-страницы — один из самых игнорируемых аспектов дизайна. Использование правильного DOCTYPE’а – ключевой момент, и Зельдман объясняет почему.

Использование неполного или устаревшего DOCTYPE’а – или вообще никакого DOCTYPE’а – ставит те самые браузеры в режим “Quirks” (причуды), где браузер предполагает, что вы написали старомодную, неэффективную разметку и код согласно унылым индустриальным нормам поздних 1990-х гг.

Зельдман выделяет важность реального использования DOCTYPE’а и указывает, что вы должны добавить url в объявлении, как здесь:

Если в своих разметках вы находите необъяснимые затруднения, возможно, что проблема в DOCTYPE.

9. Центрируйте отдельные элементы при помощи CSS – Wolfgang Bartelme (Вольфганг Бартельми)

Центрирование элементов — частая задача при создании вебсайтов. Но для новичков в CSS зачастую что-то вроде головоломки, как центрировать, например, весь вебсайт в браузерах помимо IE.

Вольфганг Бартельми – веб-дизайнер в дизайнерской фирме Bartelme design. У Бартельми один из самых элегантных блогов, и он непрерывно создает прекрасные иконки и дизайнерские работы. Он сделал дизайн блоговой платформы Squarespace и популярного софта MacHeist.

Вольфганг создал учебник, который помогает справиться со сложной задачей центрирования элементов при помощи CSS. Центрированные элементы безумно полезны, но иногда сложно добиться нужного дизайна. Учебник Бартельми гарантирует центрированное расположение при помощи выбора правильного DOCTYPE’а и присоединения магии CSS. Код неприхотливый, позволяет выполнить работу и прекрасно сочетается со стремлением к простоте в CSS.

10. Используйте команду text-transform – Trenton Moss (Трентон Мосс)

Трентон Мос разбирается в простоте использования. У него собственная компания по веб-юзабилити, которая обучает простоте использования и веб-написанию. Он также пишет для сайтов вроде Sitepoint. Трентон дает прекрасные полезные советы, основанные на своем опыте работы в качестве эксперта по веб-юзабилити.

Общеизвестно, что стили со временем меняются, особенно то, как в вебсайтах отражается текст. Лучшее, что может сделать дизайнер, это в будущем всегда вместо изменения способа отображения текста вручную использовать для изменения внешнего вида текста CSS. Трентон Мосс показывает нам, как добиться этого через использование простой, недооцененной команды CSS, называемой text-transfom

Одна из наименее известных, но действительно полезных CSS- команд – команда text-transfom. Три самых общих значения этого правила таковы: text-transform: uppercase, text-transform: lowercase и text-transform: capitalize. Первое правило превращает все знаки в заглавные буквы, второе обращает в строчные, а третье делает первую букву каждого слова заглавной.

Использование CSS для отображения внешнего вида текста на сайте позволяет изменять его в будущем и обеспечивает логичность по прошествии длительного времени.

Эта команда невероятно полезна для обеспечения последовательности стиля на всем пространстве вебсайта, особенно если у него несколько контент-редакторов. Скажем, ваш стиль требует, чтобы слова в заголовках всегда начинались с заглавных букв. Чтобы обеспечить это, используйте text-transform: capitalize. Даже если редакторы сайта забудут об этом требовании, их ошибка не отразится на сайте.

Хотя text-transfom– это мелочь, добавляемая в разметку css, она может иметь огромное значение в будущем, когда понадобится сделать изменения.

На этом сборник из десяти CSS советов для вебмастера, закончен, желаю Вам успехов в разработке сайтов.

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

CSS - это язык для формирования внешнего вида документа, созданного с помощью языка разметки. CSS обычно применяется в качестве инструмента для описания веб-страниц, которые ранее были написаны на языках XHTML и .

Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.