Четверг, 27 Декабря 2012 09:48

Стандартные стили WebKit

Written by 
Оцени эту запись
(9 Голоса)

Каждый верстальщик знает, что у каждого браузера есть свои стандартные CSS стили для всех HTML элементов. Именно с этим связаны проблемы с кроссбраузерностью, именно для этого нужен сброс стилей. Большинство браузеров предоставляют возможность просмотреть стили элемента. Причем не только те, которые верстальщик элементу задает, а и те которые задает браузер. Кроме того, я каждого CSS свойства есть свое значение по умолчанию. В данной статье речь пойдет о стандартных стилях WebKit браузеров (Chrome и Safari), так называемом user agent stylesheet. Я дам ссылку на полный текст стилей, но остановлюсь только на самых интересных моментах.

 

Давайте начнем с того, как вообще узнать стили элемента. Пример приведу на браузере Chrome:

 

 

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

 

 

 

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

 

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

 

А дальше мы видим блок под названием user agent stylesheet - это и есть стандартные стили браузера. И к ним мы теперь и перейдем.

 

Есть замечатьльный файлик - http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css, а в нем все стили для WebKit браузеров. Рассмотрим самые интересные из них.

 

Мы знаем, что все элементы блока <head> не видны на странице - стили, скрипты и т.д. И вот почему это:

 

 

/* children of the <head> element all have display:none */
 
head {
    display: none
}
 
meta {
    display: none
}
 
title {
    display: none
}
 
link {
display: none
}
 
style {
display: none
}
 
script {
display: none
}
 
Зная, эти стили их можно менять. Раньше в статье о скроллбаре я уже приводила этот пример - можно задать стили элементу в теге <style> сделать его видимым (display: block) и поставить атрибут contenteditable. Тогда стили элемента можно будет сразу менять:
 
 
 
 
Изменяя приведенные выше стили, вы увидите изменения фиолетового блока.
 
 
Раасмотрим другие стандартные стили элементов в WebKit браузерах.
 
 
Стили для абзацев:
 
 
p {
        display: block;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
}
 
 
Стили для элементов разметки HTML5:
 
 
article, aside, footer, header, hgroup, nav, section {
        display: block
}
 
Стили для заголовков:
 
 
h1 {
        display: block;
        font-size: 2em;
        -webkit-margin-before: 0.67em;
        -webkit-margin-after: 0.67em;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        font-weight: bold
}
 
Остальные отличаются размерами шрифта и отступов.
 
 
Стили для списков:
 
 
/* lists */
 
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}
 
ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}
 
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
 
ul ul, ol ul {
    list-style-type: circle
}
 
ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square
}
 
 
Как видим, у вложенных списков другие маркеры.
 
 
Стили для <input type="search">:
 
 
input[type="search"] {
        -webkit-appearance: searchfield;
        box-sizing: border-box;    
}
 
input::-webkit-textfield-decoration-container {
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-user-modify: read-only !important;
        content: none !important;
}
 
input[type="search"]::-webkit-textfield-decoration-container {
        direction: ltr;
}
 
input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
        display: block;
        -webkit-box-flex: 0;
        -webkit-user-modify: read-only !important;
}
 
input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: searchfield-decoration;
        display: block;
        -webkit-box-flex: 0;
        -webkit-user-modify: read-only !important;
}
 
input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: searchfield-results-decoration;
        display: block;
        -webkit-box-flex: 0;
        -webkit-user-modify: read-only !important;
}
 
input[type="search"]::-webkit-search-results-button {
        -webkit-appearance: searchfield-results-button;
        display: block;
        -webkit-box-flex: 0;
        -webkit-user-modify: read-only !important;
}
 
 
Стили для placeholder:
 
 
::-webkit-input-placeholder {
        -webkit-text-security: none;
        color: darkGray;
        display: block !important;
        pointer-events: none !important;
}
 
 
Стили для элементов в сотоянии focus:
 
 
:focus {
        outline: auto 5px -webkit-focus-ring-color
}
 
 
И много другого очень интересного. Зная стандартные стили, вы можете их менять и стилизировать даже сложно стилизируемые элементы, вроде элементов управления, скроллбара, валидации формы и так далее. Если интересно углубиться в стилизацию интересных элементов для WebKit, вам будет полезно знать что такое -webkit-appearance. А также приведу примеры моих интересных стилизаций:
 
 
 
 
Стандартные стили других браузеров:
 
 

Firefox: http://mxr.mozilla.org/mozilla/source/layout/style/html.css

 

 

Additional Info

Комментарии  

 
0 #5 massage lyon france 02.04.2017 23:42
Lorsque les cannelures sont trainees sur des colonnes
au XIIe siecle, il est rare qu'elles soient simples; elles sont ou chevronnees
ou en zigzags, ou torses, ou rompues, ou remplies par des
ornements (voy.

Stop by my web page - massage lyon france: http://www.sophiechassat.com
 
 
0 #4 massage lyon france 02.04.2017 09:53
Toute la portion de la facade qui regarde du cote du
jardin, dont nous parlerons plus loin, est percee de hautes ouvertures,
qui se ferment a volonte au moyen de volets glissant dans des rainures ad hoc.


Feel free to surf to my homepage; massage lyon france: http://www.sophiechassat.com
 
 
+1 #3 Mария 21.10.2015 01:35
[quote name="Mария"]са йт лохотрон он не дает выиграть[/quote игрун
 
 
+1 #2 Mария 21.10.2015 01:33
сайт лохотрон он не дает выиграть
 
 
+1 #1 Mария 21.10.2015 01:31
Люди не советую играть в эту игру тут вы не когда не выиграете только проиграете как я все деньги проиграла сайт лохотрон.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов