О сколько нам открытий чудных :)

Только что узнал о замечательном псевдоэлементе ::-ms-clear. Он задаёт стиль кнопки для очистки текстового поля в браузерах семейства IE.
P.S. Не является стандартом.

Bootstrap и универсальный селектор *

Есть в CSS универсальный селектор. Он позволяет выбрать все элементы на странице или же все элементы, вложенные в какой-либо другой, например:

* {
margin: 0;
padding: 0;
}

Эта запись обнуляет все отступы у всех элементов на странице. Или же так:


.classname * {
    color: red;
}

Так мы задаем красный цвет всем элементам, вложенным в блок с классом classname.
Первый вариант раньше был весьма популярен для глобального так называемого reset’а.
Но у универсального селектора есть недостаток — низкая производительность. И сейчас не рекомендуется использовать такой селектор. Для reset’а стилей в браузерах сейчас принято использовать различные варианты, например такой, как используется в шаблоне html5boilerplate.
Каково же было мое удивление обнаружить вот такую запись


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

в очень популярном сейчас фреймворке, как Bootstrap. Мало того, что здесь использован универсальный селектор, так здесь ещё происходит глобальная перезагрузка боксовой модели CSS. На моей практике необходимость переключать боксовую модель возникала не очень часто и для весьма ограниченного набора элементов. В Bootstrap же без этого правила не будет работать даже их сетка (grid).
Я уважаю опыт и знания разработчиков Bootstrap и последнее время часто использую их наработки, но в этом случае я совершенно с ними не согласен. И настоятельно не рекомендую использовать это стилевое правило.
Лучшим вариантом было бы добавить в таблицу стилей отдельные классы, например:


.border-box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__before:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__after:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__all,
.border-box__all:before
.border-box__all:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Я намеренно разделил правила на отдельные классы, потому как не всегда будет необходимость обрабатывать элементы и псевдо-элементы одинаково.
В общем, я сильно удивлен решением разработчиков Bootstrap.
P.S. Справедливости ради отмечу, что на стартовой странице Bootstrap’а указана эта особенность фреймворка.

Поле формы с именем submit

Для именования полей в форме не стоит использовать имена (или ID), совпадающие с методами объекта формы. То есть reset и submit. Это важно, если вам необходимо отправлять форму с помощью javascript.
При попытке отправить форму методом submit() вы увидите в консоли:

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

Коротко дело здесь в следующем. Когда вы «стучитесь» к методу формы submit() привычным способом (вариант для jQuery), как-то так:

<form id="testForm">
    <input name='submit'/>
    <input type='submit' id='testButton' value="test"/>
</form>

<script>
    var form = document.getElementById('testForm'),
        button = document.getElementById('testButton');
    form.onsubmit = function(){
        return false;
        //отключаем обычный сабмит, чтобы отправить форму
        //с помощью javascript
}
    button.onclick = function(){
    form.submit();
}
</script>


— вы получите ошибку на строчке form.submit(). Почему?

Когда вы пытаетесь отправить форму командой form.submit(), вы пытаетесь обратиться к методу формы по имени submit. Но на деле обращаетесь к элементу по имени submit. О чём вам и сообщает консоль, что HTMLFormElement submit не является функцией!
Столкнулся с этим буквально на днях, хотя такое поведение форм уже обсуждалось.

Простое резюме: не стоит использовать в форме поля с именем submit. Да и reset тоже, потому как получите аналогичную ошибку.

Анимированный PNG (APNG)

Интересно, такая старая технология, думал, что все ее поддерживают, ан нет! Столкнулся на последнем проекте. Наш верстальщик, поклонник Файрфокса, сделал прелоадер на APNG, а я сижу на Хроме и проверяю в том числе и в нем. Я был сильно расстроен, что загрузчик не крутится.
Может быть и жаль, что поддержка APNG так мала, но сейчас, в «эпоху CSS3+HTML5», когда загрузчик можно сделать вообще без использования изображений, разве может это сильно расстраивать.
Вывод простой: не используйте APNG
И проверьте свой браузер на поддержку этого фомата :)

Вендорные префиксы

Это приставки (префиксы), используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств. Приведу список некоторых префиксов для наиболее распространенных браузеров.

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузеров из семейства Mozilla
  • -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
  • -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
  • -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
  • и закончу префиксом -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

Использовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow Opera не поймет, если не написать его таким образом: -o-text-overflow . А CSS-фильтры от Microsoft можно использовать в IЕ8 следующим образом: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)". Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге