Dmitry_f2 июн 2013 в 16:05

Реализация стилей подчеркивания в LESS через генерацию png в data-URI

6 мин

11K

CSS * JavaScript *

+44

Комментарии 26

webset 2 июн 2013 в 18:36

Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок

Firefox и IE уже не браузеры? Идея конечно хороша, но я считаю, что если делать, то сразу добросовестно.

Ninjak 2 июн 2013 в 18:40

Dmitry_f 2 июн 2013 в 19:27

Исправил. Должно быть теперь кросс-браузерно.
Единственное, теперь в разных браузерах разное смещение. Над этим предстоит подумать.

webset 2 июн 2013 в 19:32

Вот теперь здорово :)
Но слева примеры не работают в FF и IE. Сам текст нормально.
Жаль еще в IE текст искажается.

Dmitry_f 2 июн 2013 в 19:47

Достаточно подкорректировать background-position. В скором времени придумаю, как решить проблему качественно.

Dmitry_f 2 июн 2013 в 21:38

Все, понял. background-position следует делать в em, а не в px, тогда всё будет ок.

CodeByZen 2 июн 2013 в 21:19

Хорошее решение. Плюсую. Кстати обсуждали уже регуляцию высоты подчеркивания тут, и про то как делать то-же самое руками есть тут и тут.

Но Ваш вариант лучше.

equand 2 июн 2013 в 21:34

А Вы не пробовали делать с помощью :before?

Dmitry_f 2 июн 2013 в 21:40

Пробовал. Не получилось. :before у инлайн-элементов не может в точности повторить прямоугольники, образуемые строками.

equand 2 июн 2013 в 21:45

А .svg в замену .png не пробовали?

Dmitry_f 2 июн 2013 в 21:52

Думал над этим. По-идее, гибкости будет ещё больше. Вызывает смущение потенциальная некроссбраузерность.
Вообще хочу дописать photoshopr, чтобы конвертить любой вектор из фотошопа сразу в background data-uri SVG, но это время.

philpirj 4 июн 2013 в 13:05

Судя по CanIUse можно без страха применять svg.

mwizard 3 июн 2013 в 02:32

Firefox 21 — к сожалению, не совсем работает:

(большая версия по клику)

Serator 3 июн 2013 в 10:32

Зато тот самый text-decoration, что по стандарту должен быть, как раз таки работает, но с префиксом "-moz-".

Spamkit 3 июн 2013 в 03:04

Возмжоно меня сочтут недостаточно просвещенным, но я хочу сказать Вам отдельное спасибо за текст саги о пешеходах! Спасибо, Вы «сделали мой день!»

veitmen 3 июн 2013 в 06:38

Эмм… Чего то я не понял аналогии про пешеходов. Вы имели ввиду, что вы про такое не знали и для вас это не велосипед, поэтому это сага о пешеходах? :) Или вы про какую ту другую статью автора? :)