Интересные CSS-хаки, которые облегчат вам жизнь


Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.

outline: none;

Не стоит писать outline: none ни для одного из элементов. Тогда можно будет видеть где находиться выделение в брузере по нажатию кнопки tab, а пользователи мобильных устройств будут наверняка уверены, что они нажали на вашу ссылку.

::selection, ::-moz-selection {
    ...
}

Нехитрые манипуляции со стилями этих псевдо-элементов позволят вам поменять своства подсветки выделенных элементов на странице.

::-webkit-scrollbar {
    ...
}
::-webkit-scrollbar-button {
    ...
}
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {
    ...
}
::-webkit-scrollbar-thumb {
    ...
}
::-webkit-scrollbar-corner {
    ...
}
::-webkit-resizer{
    ...
}

Поколдовав с этими нехитрыми псевдо-элементами вы сможете настроить внешний вид скроллбаров для десктопных браузеров на WebKit и Blink. Но это не все, скроллы можно настроить и для IE:

body {
    scrollbar-base-color: #C0C0C0;
    scrollbar-base-color: #C0C0C0;
    scrollbar-3dlight-color: #C0C0C0;
    scrollbar-highlight-color: #C0C0C0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #C0C0C0;
    scrollbar-dark-shadow-color: #C0C0C0;
}

И даже для `Firefox`:

@-moz-document url-prefix(http://),url-prefix(https://) {

scrollbar {
    -moz-appearance: none !important;
    background: rgb(0,255,0) !important;
}

thumb, scrollbarbutton {
    -moz-appearance: none !important;
    background-color: rgb(0,0,255) !important;
}

thumb:hover, scrollbarbutton:hover {
    -moz-appearance: none !important;
    background-color: rgb(255,0,0) !important;
}

scrollbarbutton {
    display: none !important;
}

scrollbar[orient="vertical"] {
    min-width: 15px !important;
}
}

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

img {
    -ms-interpolation-mode: bicubic;
}

Вот этот код исправит ситуацию.

16.12.2013 23:25 | 2553 просмотров