Интересные 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;
}

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

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

Комментарии