Новые свойства CSS3 не только дают нам дополнительные  возможности, но приводят  к некоторым трудностям. Эта статья поможет узнать Вам, правильно ли Вы используете новые функции и  избежать распространенных ошибок.

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

В общем, некоторые моменты  пугают. Сегодня мы рассмотрим ошибки, которые можно совершить при написании CSS3-кода и узнаем, как их избежать.

Не забывайте указывать префиксы для всех браузеров

Префиксы для браузера (vendor prefixes)  добавляются перед свойствами  CSS.  Использование этих приставок без прикреплённых свойств фактически бессмысленно.

Например, свойство CSS3  transform  мы укажем как  -moz-transform  для  Mozilla Firefox,   как  -webkit-transform для  Safari и  Chrome,  как -o-transform для Opera и, наконец, как  -ms-transform  — для Internet Explorer.

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

Не делайте так:

.rotate {

    -webkit-transform: rotate(7.5deg);

    -moz-transform:    rotate(7.5deg);

}

Делайте так:

.rotate {

    -webkit-transform: rotate(7.5deg);

    -moz-transform:    rotate(7.5deg);

    -ms-transform:     rotate(7.5deg);

    -o-transform:      rotate(7.5deg);

}

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

Больше про эту особенность Вы сможете прочитать в  статье  Эрика Мейера .

Не ставьте свойство с приставкой в конец списка

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

Всегда прописывайте свойство без приставки (это необходимо), и запомните главное: никогда не ставьте свойство с префиксом для браузера в  конец списка. Если браузер поддерживает версию без приставки-это свойство становится приоритетным.  Если Вы ставите свойство в конец списка, браузер не будет его воспроизводить.

Не делайте так:

.not-a-square {

   /* These do totally different things */

   border-radius: 30px 10px;

   -webkit-border-radius: 30px 10px;

}

Safari5 понимает два эти свойства по-разному. Свойство без префикса округлит  верхний левый и нижний правый углов на 30px и верхний правый и нижний левый угол на 10px. Свойство с приставкой  округлит углы по горизонтали  на  30px и добавит вертикальное округление радиусом 10px. Если Вы ставите свойство с префиксом в конец списка, то браузер не воспроизведёт его .

Смотрите на примере

Можете узнать больше об этой особенности из статьи  Криса Коера.

Оставайтесь в теме

Google  Chrome стремительно развивался от версии 0 до версии 10  за последние пару лет. Следовательно, есть некоторые различия в том, как эти версии отображают код  CSS3.

Простой пример — то, как мы указываем  линейные градиенты для Mozilla и WebKit . Мы видим, что у них разный  синтаксис для одного и того же свойства:

.gradient {

    background-image: -moz-linear-gradient(top, #eee, #ccc);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eee),color-stop(1, #ccc));

}

Версия Mozilla более проста и  ближе к стандартам, чем версия WebKit. Возможно, в последних версиях браузерах WebKit (Chrome10, и Safari 6), они будут иметь другой синтаксис (это не точно), похожий на синтаксис  Мозиллы.

.gradient {

    background-image: -moz-linear-gradient(top, #eee, #ccc);

    background-image: -webkit-linear-gradient(#eee, #ccc);

}

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

Рекомендуем замечательный сервис сss3please — онлайн-ресурс для копипасты отрывков CSS3, у которых есть все «свежие» свойства CSS3 в правильном порядке.

Плохое форматирование

Плохое форматирование -  не такой  смертный грех, как предыдущие, но все же давайте рассмотрим и этот вопрос. Если Вы используете много символов подряд, код выглядят ужасно, и Вы можете в нём запутаться.

Не делайте так:

.shadow {

    -webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.1),0 0 16px rgba(0,0,0,0.1);

    -moz-box-shadow:inset 0 0 8px rgba(0,0,0,0.1),0 0 16px rgba(0,0,0,0.1);

    box-shadow:inset 0 0 8px rgba(0,0,0,0.1),0 0 16px rgba(0,0,0,0.1);

}

Пусть код будет чистым:

.shadow {

    -webkit-box-shadow:

      inset 0 0 8px  rgba(0,0,0,0.1),

            0 0 16px rgba(0,0,0,0.1);

    -moz-box-shadow:

      inset 0 0 8px  rgba(0,0,0,0.1),

            0 0 16px rgba(0,0,0,0.1);

    box-shadow:

      inset 0 0 8px  rgba(0,0,0,0.1),

            0 0 16px rgba(0,0,0,0.1);

}

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

Не переборщите

Вы, конечно,  можете заставить всё вращаться и  изменяться в размере,  добавить везде прозрачность,  использовать 10 различных шрифтов и сделать так, чтобы  каждый элемент на странице отбрасывал тень, но зачем всё это нужно сразу?

Не буду объяснять Вам, что такое хороший вкус. Вы — веб-дизайнер и должны сами всё  знать.

Только учтите, что у многих  свойст CSS3 есть некоторые особенности. У WebKit, например, есть превосходное свойство keyframe-анимации, Если Вы «оживляете»  только несколько элементов на странице,анимация  будет долго воспроизводиться, и возможно, даже, будет подтормаживать браузер.

Ещё один пример — большие тени  приводят к проблемам с прокруткой страницы  в WebKit, которую  пользователи будут наблюдать  на старых версиях в течение некоторого времени.

Просто имейте в виду, что удалив некоторые свойства CSS3,  вы избавитесь от нескольких проблем.

Что касается мобильных устройств

Ещё одно потрясающее свойство CSS3  — это media queries. Теперь у нас есть возможность подстраивать сайты под разные устройства и изменять ширину элементов. Вы можете прямо в стилях  включить стили для очень маленьких экранов:

@media screen and (max-width: 480px) {

    /* Mobile stylings */

}

Уберите элементы, которые Вы считаете менее значимыми. Удостовериться, что размеры изображений указаны правильно, и внизу не появляется горизонтальная  прокрутка. И помните о тех  проблемах о которых мы говорили? Это вдвойне касается  мобильных устройств, ведь малейшая неточность может вызвать серьезные неудобства.  Рассмотрим на примере как это лучше сделать:

@media screen and (max-width: 480px) {

    aside, .hide-mobile {

        display: none;

    }

    img {

        max-width: 100%;

    }

    pre {

        white-space: normal;

    }

    * {

        -webkit-animation:  none !important;

        -webkit-transition: none !important;

        -moz-transition:    none !important;

        -o-transition:      none !important;

    }

}

Ура!

Вы всё сделали  правильно, можете собой гордиться.

По материалам статьи NETMAGAZINE



Комментарии