Записи с метками ‘CSS-рецепты’

Еще раз про inline-block (коротко)

Среда, 19 августа 2009

Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block. Для этого воспользуюсь хаком для ИЕ 6 и 7 версий. Это необходимо, так как ИЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL, а только для строчных (например:A, SPAN). Буду предельно краток.

.someclass{
    display: inline-block;
}

.someclass{
    //display: inline;/*магия ИЕ*/
}

Именно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для ИЕ.
Работает в ИЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее – везде).
Для ФФ2 нужен костыль

Условные комментарии (conditional comments)

Воскресенье, 5 июля 2009

Вы используете условные комменарии? Конечно, вы их используете. Чтобы отделить стили для ИЕ от других и при этом сохранить валидность своего CSS. Тем самым добавляя лишние http-запросы для все еще  многочисленных несчастных пользователей ИЕ. И еще в некоторой степени затрудняя себе правки стилей, если какое-либо свойство различается и для нормальных браузеров, и для ИЕ7, и для ИЕ6. Приходится править три файла, а не один. Можно забыть, запутаться, ну в общем неудобно.

Можно ли этого избежать (этого – это неудобства, лишние http-запросы и т.п.)? Да, и при этом с помощью все тех же условных комментариев! Кажется в начале года встретил на каком-то сайте (честно, не помню) подобный рецепт. Достаточно в вашем HTML с помощью условных комментариев разделить вывод в браузер BODY с различными классами. Вот как-то так:

<!--[if (!IE) | (gt IE 7)]><!-->

    <body>

<!--><![endif]-->

<!--[if IE 7]>

    <body class="ie7">

<![endif]-->

<!--[if IE 6]>

    <body class="ie6">

<![endif]-->

Пример (соответственно приведенному примеру нормальные браузеры покажут красный экран, ИЕ7 — зеленый, а ИЕ6 — синий ).

Теперь у вас есть возможность, не используя хаки и не плодя лишние файлы, править все стили в одном файле. Достаточно в  стилях перед нуждающимся в корректировке для ИЕ7 или ИЕ6 свойством  писать соответсвующий класс.

для нормальных браузеров:

.selector {attr: value }

для ИЕ7:

.ie7 .selector {attr: new value} - это свойство увидит только ИЕ7

ну и соотвественно для ИЕ6:

.ie6 .selector {attr: new value} - а это  только ИЕ6

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

P.S. Единственно, что если вам приходится использовать фильтры или expression для ИЕ, то валидность CSS сохранить не удастся. Но, по-моему, важнее валидность HTML, чем CSS. Потому как валидность CSS никак не влияет на доступность сайта, а только лишь на его отображение.

Как убрать обводку у input и textarea в Сафари и Хроме?

Среда, 29 апреля 2009

Очень просто. В таблице стилей пропишите для input и textarea следущее


                input,
                textarea {
                    outline:none;
                }
                

 

Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input, который должен тянуться на всю предоставляемую ему ширину
input без фокуса

А теперь поместим курсор в поле ввода.

поле ввода с фокусом

Пример из сделанной недавно верстки

Выглядит немного неаккуратно, неправда ли?

Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
условное меню с фокусом на одном из пунктов пунктом
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.

Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана