CSS Guru » CSS-рецепты

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

Сергей Кириченко — Wed, 26 Jan 2011 21:00:49 +0000

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

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

Пример (соответственно приведенному примеру нормальные браузеры покажут красный экран, �?Е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 никак не влияет на доступность сайта, а только ли�?ь на его отображение.

Xотите быстро продать (подержанный|б у) или новый авто? �? не хотите тратить впустую время, блуждая по сотням авто базаров. Тогда на�? сервис специально для Вас! На�? авторынок предлагает Вам купить или продать (подержанный|б у|) авто практически любых марок и моделей, во всех городах. На�?и б у автомобили ждут своих новых владельцев, которые хотят продать автомобиль выгодно, и в кратчай�?ие сроки. Если вы ре�?или купить ма�?ину, но новый авто вам дорого, на�? авто базар предлагает подержанные автомобили по вполне де�?евым ценам. Предлагаем Вам б у авто (подержанные автомобили), что совер�?енно не означает значит, что у нас вы сможете купить плохое авто. Б у автомобили имеет низкую цену. Авторынок — уникальный поисковик подержанных автомобиль. Вы хотите купить или продать (подержанный|б у|) автомобиль на вторичном рынке? Теперь Вам нет необходимости заходить на каждый авто рынок, не нужно ехать на автобазар. Просто посещайте на�? автобазар. Теперь купля подержанного автомобиля стала проще — добавляйте выбранные авто в Портфель по желанию. Оцените возможность искать одновременно несколько марок или моделей авто, выбирать несколько регионов, в которых продается ма�?ина. Ре�?или продать (подержанный|б у) или новый автомобиль? Желаете чтобы объявление было на на�?ем автобазаре ? Ускорьте продажу авто, сделав его VIP с помощью СМС.

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

Сергей Кириченко — Wed, 26 Jan 2011 21:00:02 +0000

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

.someclass{
    display: inline-block;
}

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

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

Вы хотите быстро купить/продать (подержанный|б у) или новыйавтообиль? Не хотите тратить много время, блуждая по десяткам онлайн-авторынкам. Тогда На�? сервис специально для Вас!

На�? автобазар предлагает Вам купить или продать (подержанный|б у|) автомобиль практически любых марок и моделей, во всех крупных городах. На�?и авто ждут своих новых владельцев, которые хотят продать ма�?ину выгодно, и в кратчай�?ие сроки. Если Вы ре�?или купить автомобиль, но новый автомобиль ва�?ей мечты вам дорого, авто базар предлагает б у автомобили по вполне де�?евым ценам.

Предлагаем б у {авто} (подержанные автомобили), что не означает значит, что у нас вы сможете приобрести плохое авто. Б у авто имеет низкую стоимость.

Авто-рынок — уникальный сайт подержанных автомобиль. Вы ре�?или купить (подержанный|б у|) авто на вторичном рынке? Теперь Вам нет необходимости посещать каждый авто базар в интернете, не нужно ехать на автобазар. Просто посещайте на�? авторынок.

Теперь поиск автомобиля стала быстрее — добавляйте понравив�?иеся ма�?ины в Портфель . Оцените возможность искать одновременно несколько марок авто, выбирать по регионах, в которых продается автомолбиль.

Хотите купить(продать) (подержанный|б у) или новый авто? Хотите чтобы Ва�?е объявление попало на на�? автобазар ? Ускорьте продажу автомобиля, сделав его VIP с помощью СМС.

Xотите быстро купить (подержанный|б у) или новый авто? Не хотите тратить впустую много время, блуждая по сотням авто-рынкам. Тогда На�? сайт специально для Вас! �?нтернет авто рынок предлагает Вами (подержанный|б у|) авто во всех городах. На�?и автомобили ждут своих новых владельцев, которые хотят купить (продать) автомобиль выгодно, и в кратчай�?ие сроки. Если Вы хотите купить ма�?ину, но новый авто ва�?ей мечты вам не по карману, автобазар предлагает подержанные авто по вполне де�?евым ценам. Предлагаем Вам подержанные авто , что не означает значит, что у нас Вы сможете приобрести плохое авто. Подержанные автомобили имеет более низкую стоимость. Автобазар — поисковик подержанных автомобиль. Желаете купить (подержанный|б у|) авто на вторичном рынке? Теперь Вам нет необходимости заходить на каждый авто рынок в интернете, не нужно ехать на автобазар. Просто посещайте на�? онлайн авто-базар. Теперь поиск б у fdnj стала быстрее — добавляйте понравив�?иеся авто в Портфель по желанию. Обратите внимание на возможность искать одновременно несколько марок или моделей авто, выбирать несколько регионов, в которых может продаваться авто. Хотите продать (подержанный|б у) или новый автомобиль? Хотите чтобы объявление было на на�?ем автобазаре ? Ускорьте продажу авто, сделав его VIP прислав SMS.

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

Сергей Кириченко — Wed, 29 Apr 2009 18:57:08 +0000

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


                input,
                textarea {
                    outline:none;
                }

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

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

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

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

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

Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.

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