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

                input,
                textarea {
                    outline:none;
                }
                

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

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

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

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

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

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

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

CSS-рецепты

Есть у ИЕ6 такая особенность: если какому-либо блоку задать ширину, то ИЕ6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то ИЕ6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).

(далее…)

азы css, азы верстки, верстка

Забавно, что поводы для написательства мне дает студия Лебедева: выходом в свет нового сайта, или же, как в это раз, новым рецептом в Техногрете.

Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.

Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что ж, хороший способ применения нечасто используемого свойства inline-block. Но…

Так это выглядит в браузере

Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.

(далее…)

верстка

Боремся с отсутствием со стороны Файрфокса 2 поддержки простого, но нужного свойства inline-block

Так случилось, что ФФ2 не поддерживает для свойства display значения inline-block. Взамен него в ФФ2 есть несколько нестандартных CSS-свойств, в частности -moz-inline-stack. Из того, что я знаю, это свойство лучше других подходит для повторения поведения, подобного inline-block. Но при его использовании надо учитывать несколько странностей. Для демонстрации этих странностей CSS-свойства буду прописывать инлайн, а для просмотра этих странностей вам понадобится браузер Файрфокс 2.

(далее…)

No tags

inline-block

При этом значении свойства display элемент ведет себя как обычный строчный элемент (не вызывая перевода строки до и после себя, в отличие от блочных элементов), но при этом содержимое этого элемента форматируется как внутри элемента блочного. Элементу же можно будет задать свойства width и height, что невозможно для элементов строчных

Проще, чем долго и путано объяснять, показать на примерах. Для наглядности подкрасим наши элементы и зададим им размеры и отступы

1. блочный элемент
   еще блочный элемент
   Как видите, каждый новый элемент располагается ниже следущего, даже если рядом с предыдущим есть место
2. элемент со свойством display: inline-block элемент со свойством inline-block элемент со свойством inline-block и vertical-align: middle, в отличие от предыдущих с выравниванием по базовой строке — эти элементы находятся на одной строке, но при этом «слушаются» свойств width и height и контент внутри них ведет себя как и в обычном блочном элементе. И они не теряют свойства строчных элементов выравниваться по высоте строки. Еще интересно, что переносятся эти элементы на новую строку целиком, в отличие от строчных элементов, которые «рвутся», если не помещаются на одной строке.
3. элемент со свойством display: inline еще строчный элемент — эти элементы простые строчные, и им не удастся задать размеры. И попытка вызвать перевод строки внутри элемента с помощью BR приведет именно к переводу строки. элемент со свойством display: inline
   и BR‘ом внутри

No tags

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

И наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для ИЕ8, но понимает это свойство и без него

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title

верстка, мнение

Это приставки (префиксы), используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств. Приведу список некоторых префиксов для наиболее распространенных браузеров.

• -o- — префикс для браузера Опера
• -moz- — префикс для браузеров из семейства Mozilla
• -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
• -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
• -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
• и закончу префиксом -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

Использовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow Opera не поймет, если не написать его таким образом: -o-text-overflow . А CSS-фильтры от Microsoft можно использовать в ИЕ8 следующим образом: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)". Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге

No tags

Маленькая радость:)

С подачи хабра установил и запустил VirtualPC. Теперь Developer Toolbar в ИЕ6 работает и у меня. Ура!

No tags