Три полезные мелочи для верстки

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

Знак ударения для любой буквы

Иногда, при написании некоторых слов, нужно явно указать ударение. Есть два выхода: первый состоит в заменой аналогичными латинскими буквами с знаком ударения таких как Á, è. Правда это создает лишние неприятности, такие как невозможность поиска, или проверки орфографии этого слова. Но что делать, если нужно поставить ударение над буквой і, или я? В этом случае на помощь приходит спец-символ ́. Его нужно размещать после буквы, над которой нужно поставить ударение. В конце заметки приводиться пример с использованием знака ударения.

Перенос неразрывной строки

В блоках с резиновой шириной порой случается досадная ситуация, когда внутри него находится строка текста без пробела, тогда при чрезмерном сужении блока строка вываливается из него из-за невозможности ее перенести. Для того чтоб переносить неразрывную строку существует специальный тег <wbr> который отлично работает, но не проходит валидацию при доктайпе XHTML-типа. Но есть более красивый способ, чтоб сделать перенос неразрывной строки с прохождением валидации. Для этого на помощь приходит спец-символ , он вставляет знак переноса(дефис) в установленном месте, если строка не помещается в отведенные границы и переносит остальную часть текста на другую строку.

Как убрать пунктирную рамку у ссылок, которая появляется при клике по ним в FireFox

Многие неоднократно замечали, что в браузере FireFox в момент клика по ссылке вокруг не возникает пунктирная рамка цвет, который указан в стилях для ссылки. Недостаток этой рамки в том, что она иногда идет в разрез с общим дизайном макета(когда для ссылки задается особый контур), или имеет очень большие размеры если ссылка является блоком с бекграудом под которым прячется текст используя IR метод Phark (подробней о методе можно прочитать в заметке Как заменить текст картинкой). Чтоб убрать эту пунктирную рамку достаточно для нужной ссылки задать в стилях свойство outline-style:none; Свойство outline-style задает тип рамки(dotted, dashed,solid,double) вокруг объекта, которая не влияет на размеры объекта. То есть если есть блок шириной в 300 пикселей и в нем располагаются два плавающих блока с шириной по 150, то их рамки в 5 пикселей заданные через outline-width не будут влиять на размеры блоков, но будут накладываться друг на друга. Есть еще свойство outline-color, которое задает цвет рамки, к тому же все три свойства можно записывать в сокращенной форме outline:5px double #000; К сожалению, это свойство не поддерживается браузерами Internet Explorer 7 и ниже.

Вот пример реализации всех вышеуказанных полезностей и свойства outline
(для отображения разрыва строки нужно изменить размеры окна браузера)

Источники материала:
webew.ru
fastcoder.org

17.Ноя.2008 | В категории HTML&CSS

cheke 17.Ноя.2008 в 22:49

Спасибо.
Как раз сегодня размышлял по поводу ударения…
kalapunga 18.Ноя.2008 в 0:26

отлично, что вы зашли ко мне на блог сегодня!!! иначе я бы не нашел ваш, а он так полезен, спасибо
Xero201 18.Ноя.2008 в 0:41

Действительно полезные мелочи. Вот только почему ничего подобного нет в 100% книг по веб-строительству которые у меня есть!!! Неужели авторы печатных трудов настолько зажрались?!
Сергей М. 18.Ноя.2008 в 10:19

Мягкий перенос shy, вроде как, тоже не всеми поддерживается. Хотя при использовании justify было бы неплохо сделать движок переносов - чтобы хоть как-то нивелировать “дыры”.

Ударения - об этом еще Иванов писал, их нормально воспринимают вроде как только Яндекс с Гуглом. Но это нормально

За аутлайн - сэнкс, а то у меня в ФФ в настройках эти рамки выключены и совсем забыл про это свойство. Забил себе в шапку.
Zodios 18.Ноя.2008 в 13:45

2Сергей М.
На видовсе shy работает во всех браузерах(IE6,7, FF3.0.4, Opera 9.62, Safari 3.1.2), на других платформах пока не имею возможности просмотреть, нужно будет в браузершот закинуть.

2Xero201
Чтоб все расписать в книге нужно талмуд делать. А вообще, это все должно быть в спецификации…
Jman 18.Ноя.2008 в 15:23

во втором ФФ shy неработает.

outline подерживает shorthand. Тоесть можно писать короче outline:none; или ещё короче outline:0;
Temych 19.Ноя.2008 в 19:35

Да со вторым FF реально фигня, возможно есть какие-то варианты?
Zodios 19.Ноя.2008 в 22:25

2Temych
Использовать wbr который не проходит валидацию
burnis 22.Ноя.2008 в 9:06

здорово, даже не знал что есть такие приколюхи. Одно только вот думаю, почему нет у нас нормального единого стандарта, который бы браузераим поддерживался на должном уровне.
Семен Михайлович Фролов 11.Дек.2008 в 0:06

Огромное спасибо за инфу про ударение! У меня задание сделать сайт в виде тетрадки первоклассника! Мучался с картинками, а оказывается есть такое дело и все оч просто!
Еще раз спасибо!
Семен Михайлович Фролов 11.Дек.2008 в 0:08

Кстати стандарты то есть, только браузеры их по своему воспринимают. Если у всех будет одинаково, не в чем им будет соревноваться )
Printer 15.Дек.2008 в 11:23

Спасибо, хорошая статья. Даже не пожалел получаса, потраченных на чтение талмуда.
MaX 24.Дек.2008 в 14:58

Хороший блог, только вот в примере почему ударение на согласные?
супер порно под юбкой 26.Янв.2009 в 11:32

Клевый сайт у тебя
Bas Taller 4.Фев.2009 в 0:45

Спасибо. Про FF - редко в нете! Работает на ура!
СПАСИБО!!!
Бмв 8.Мар.2009 в 12:03

Привет, стукни в аську 236781742 плз
Cokkto 29.Апр.2009 в 15:31

Пример с текстом с ударением адекватно ведет себя только в IE8. В Опере и младших ослах на ряде машин есть однозначная кривизна. На Маке тоже не очень красиво иногда смотряться квадратики. Лучший выход в подобных случаях - не пользоваться вебдингами, а использовать старый добрый апостроф и шаманство со спаном.
P.S. да, и ударения расставлены неверно )
Den777 7.Июн.2009 в 19:19

пания «АЙЗАТ+» — официальный представитель Станкостроительного Торгово-Промышленного объединения «ДВТ» в городе Казани приветствует на страницах своего сайта всех, кто ищет качественное металлообрабатывающее, кузнечно-прессовое и автосервисное оборудование! Здесь вы сможете подобрать станки и механизмы российских и зарубежных заводов-изготовителей, которые позволят как полностью оснастить производство любого масштаба, так и расширить уже существующий бизнес и спектр услуг с помощью предлагаемого нами оборудования. Мы занимаемся поставкой оборудования (токарных станков, гильотин и т.д.) по Казани и всему Татарстану.
CATAHИCT 13.Июн.2009 в 6:39

Текст лично мне ничего особенного не дал. Но вот для многих может оказаться очень полезным…
Павел 2.Июл.2009 в 21:04

В офисе так нудно было, хорошо что нашел ваш сайт. Читаю с интересом:)

Написать комментарий.