Примечание: ниже дан перевод статьи «Cross-browser underlining / the difficulty of drawing a line», в которой обращается внимание на подчеркивание ссылок в различных браузерах и обсуждается, насколько это корректно с различны точек зрения.
Прямо перед тем, как закончить этот год, я приготовил для вас небольшой подарок. Если вы уже знаете, как много времени отнимают правки кроссбраузерного вида сайта, то вам будет интересно с ней ознакомиться.
Несоответствия браузеров. Как веб-разработчики вы сталкивается с ними каждый божий день. Они стали неотъемливой частью нашей работы и очень часто влияют на то, каким именно образом мы решаем некоторые проблемы. Но что важнее всего, все эти правки отнимают огромное количество бесценного времени, даже при наличии таких замечательных средств для разработки как Firebug. Люди, которые не работают каждый день с html и css, с трудом смогут осознать все эти тонкости и суть несоответствий.
Слева направо: Firefox, Opera, Safari, IE7 и IE6
Недавно я столкнулся с весьма интересным случаем, который не так часто встретишь в прессе. И не то, чтобы он был сильно значимым или даже явно ошибочным, но мне просто очень хочется обратить на него ваше внимание. В нем, однако, проявляется вся мощь несоответствия браузеров друг другу. И что важнее всего, это очень простой и понятный пример даже для тех, кто не очень разбирается в природе css.
Ссылки — наиболее важная часть сегодняшнего интернета, его краеугольные камни. Тег <a> должен быть самым сильным в html-спецификации. И все мы знаем, что ссылки подчеркиваются. И все браузеры применяют стандартные стили, так что ссылки подчеркиваются. Пока все хорошо.
Подчеркивание — это же так просто! Нужно просто нарисовать линию снизу текста. Но где именно «снизу»? Я провел быстрое тестирование, которое выразилось в достаточно похожих результатах. Все браузеры согласились с тем, что линия под текстом должна быть расположена в пределах высоты строки линейного (inline) элемента, и для нее не должно требоваться дополнительного вертикального пространства. Единственное небольшое несоответствие было замечено для Firefox, который расположил линию в 1px ниже, чем остальные браузеры. Не так плохо.
Когда я документировал это различие для Firefox, что-то подтолкнуло меня вернуться к тестовой странице. Все браузеры расположили линию в 1px над нижней границей (absbottom) текстовой строки. Но действительно ли это 1px или это величина вычисляется относительно размера шрифта? Я провел дополнительные тесты с увеличенным размером шрифта (если вы возьметесь их повторить, увеличивайте по-максимуму), результаты оказались весьма интересными.
Все семейства браузеров вели себя по-разному. Firefox по-прежнему отрисовывал линию на нижней границе строки, отрисовка Opera ставила ее на 1px выше этой границы. Safari располагала линию на 1px ниже базовой линии текста, а IE (6&7) располагал ее где-то между базовой линией и нижней границей. При всем при этом, не все браузеры увеличивали размер самого подчеркивания. Было отмечено 4 различных поведения для 4 различных браузеров. Супер!
Как я уже говорил, этот эффект достаточно мал, и вы не будете его замечать до тех пор, пока специально не обратите внимание на различия между браузерами или не увеличите довольно значительно размер шрифта. Но эффект, без сомнения, проявляется. Даже такая простая вещь, как подчеркивание текста, базовая возможность любого браузера, реализована совершенно по-разному в современных браузерах.
В этом свете, только реализация от Firefox может быть рассмотрена как пагубная, так как в его случае подчеркивание затрагивает границу нижележащего элемента, если он не будет соответствующим образом стилизован. Это, естественно, уменьшает визуальное восприятие таких ссылок.
И это вещи, с которыми мы работаем каждый день!
Спасибо всем, кто ознакомился с переводом. В комментариях к исходной статье предлагается использовать для стилизации ссылок границу в относительных единицах, но тогда проблема, связанная с Firefox, будет проявляться по всех браузерах. В общем, буду рад вашим комментариям.
Web Optimizator: проверка скорости загрузки сайтов
Прямо перед тем, как закончить этот год, я приготовил для вас небольшой подарок. Если вы уже знаете, как много времени отнимают правки кроссбраузерного вида сайта, то вам будет интересно с ней ознакомиться.
Несоответствия браузеров. Как веб-разработчики вы сталкивается с ними каждый божий день. Они стали неотъемливой частью нашей работы и очень часто влияют на то, каким именно образом мы решаем некоторые проблемы. Но что важнее всего, все эти правки отнимают огромное количество бесценного времени, даже при наличии таких замечательных средств для разработки как Firebug. Люди, которые не работают каждый день с html и css, с трудом смогут осознать все эти тонкости и суть несоответствий.
Слева направо: Firefox, Opera, Safari, IE7 и IE6
Недавно я столкнулся с весьма интересным случаем, который не так часто встретишь в прессе. И не то, чтобы он был сильно значимым или даже явно ошибочным, но мне просто очень хочется обратить на него ваше внимание. В нем, однако, проявляется вся мощь несоответствия браузеров друг другу. И что важнее всего, это очень простой и понятный пример даже для тех, кто не очень разбирается в природе css.
Посмотрим на ссылки
Ссылки — наиболее важная часть сегодняшнего интернета, его краеугольные камни. Тег <a> должен быть самым сильным в html-спецификации. И все мы знаем, что ссылки подчеркиваются. И все браузеры применяют стандартные стили, так что ссылки подчеркиваются. Пока все хорошо.
Подчеркивание — это же так просто! Нужно просто нарисовать линию снизу текста. Но где именно «снизу»? Я провел быстрое тестирование, которое выразилось в достаточно похожих результатах. Все браузеры согласились с тем, что линия под текстом должна быть расположена в пределах высоты строки линейного (inline) элемента, и для нее не должно требоваться дополнительного вертикального пространства. Единственное небольшое несоответствие было замечено для Firefox, который расположил линию в 1px ниже, чем остальные браузеры. Не так плохо.
Тестируем еще раз
Когда я документировал это различие для Firefox, что-то подтолкнуло меня вернуться к тестовой странице. Все браузеры расположили линию в 1px над нижней границей (absbottom) текстовой строки. Но действительно ли это 1px или это величина вычисляется относительно размера шрифта? Я провел дополнительные тесты с увеличенным размером шрифта (если вы возьметесь их повторить, увеличивайте по-максимуму), результаты оказались весьма интересными.
Все семейства браузеров вели себя по-разному. Firefox по-прежнему отрисовывал линию на нижней границе строки, отрисовка Opera ставила ее на 1px выше этой границы. Safari располагала линию на 1px ниже базовой линии текста, а IE (6&7) располагал ее где-то между базовой линией и нижней границей. При всем при этом, не все браузеры увеличивали размер самого подчеркивания. Было отмечено 4 различных поведения для 4 различных браузеров. Супер!
Итак?
Как я уже говорил, этот эффект достаточно мал, и вы не будете его замечать до тех пор, пока специально не обратите внимание на различия между браузерами или не увеличите довольно значительно размер шрифта. Но эффект, без сомнения, проявляется. Даже такая простая вещь, как подчеркивание текста, базовая возможность любого браузера, реализована совершенно по-разному в современных браузерах.
В этом свете, только реализация от Firefox может быть рассмотрена как пагубная, так как в его случае подчеркивание затрагивает границу нижележащего элемента, если он не будет соответствующим образом стилизован. Это, естественно, уменьшает визуальное восприятие таких ссылок.
И это вещи, с которыми мы работаем каждый день!
Спасибо всем, кто ознакомился с переводом. В комментариях к исходной статье предлагается использовать для стилизации ссылок границу в относительных единицах, но тогда проблема, связанная с Firefox, будет проявляться по всех браузерах. В общем, буду рад вашим комментариям.
Web Optimizator: проверка скорости загрузки сайтов
