Cross-browser underscore: drawing difficulties
Note: Below is a translation of the article “Cross-browser underlining” , which draws attention to the underlining of links in various browsers and discusses how correct this is from different points of view.
Right before you finish this year, I have prepared a small gift for you. If you already know how much time it takes to edit the cross-browser view of the site, then you will be interested to read it.
Browser inconsistencies. As web developers, you encounter them every single day. They have become an integral part of our work and very often influence the way in which we solve some problems. But most importantly, all these edits take a tremendous amount of valuable time, even with such great development tools as Firebug. People who do not work every day with html and css, will hardly be able to understand all these subtleties and the essence of inconsistencies.
')
From left to right: Firefox, Opera, Safari, IE7 and IE6
Recently, I was faced with a very interesting case, which is not so often met in the press. And not that it was very significant or even clearly erroneous, but I just really want to draw your attention to it. It, however, shows all the power of the browser mismatches to each other. And most importantly, this is a very simple and clear example, even for those who are not very versed in the nature of css.
Links are the most important part of today's Internet, its cornerstones. The <a> tag must be the strongest in the html specification. And we all know that links are underlined. And all browsers apply standard styles, so the links are underlined. So far so good.
An underline is so easy! You just need to draw a line below the text. But where exactly is the “bottom”? I conducted a quick test, which resulted in quite similar results. All browsers agreed that the line below the text should be located within the line height of the linear ( inline ) element, and it should not require additional vertical space. The only minor inconsistency was noticed for Firefox, which placed the line 1px lower than other browsers. Not so bad.
When I documented this distinction for Firefox, something pushed me back to the test page. All browsers placed a line at 1px above the bottom line ( absbottom ) of the text line. But is it really 1px or is this value calculated relative to the font size? I conducted additional tests with an increased font size (if you take them again, increase them to the maximum), the results were very interesting.
All browser families behaved differently. Firefox still draws a line at the bottom of the line; Opera’s drawing put it 1px above that line. Safari positioned the line 1px below the baseline of the text, and IE (6 & 7) positioned it somewhere between the baseline and the bottom border. For all that, not all browsers increased the size of the underscore itself. There were 4 different behaviors for 4 different browsers. Super!
As I said, this effect is quite small, and you will not notice it until you specifically notice the differences between browsers or increase the font size quite significantly. But the effect, no doubt, manifests Even such a simple thing as underlining text, the basic feature of any browser, is implemented completely differently in modern browsers.
In this light, only the implementation from Firefox can be viewed as disastrous, since in his case the underscore affects the border of the underlying element if it is not appropriately styled. This naturally reduces the visual perception of such links.
And these are the things we work with every day!
Thanks to everyone who read the translation. In the comments to the original article, it is proposed to use the border in relative units for link styling, but then the problem related to Firefox will manifest itself in all browsers. In general, I will be glad to your comments.
Web Optimizator: checking the speed of loading sites
Right before you finish this year, I have prepared a small gift for you. If you already know how much time it takes to edit the cross-browser view of the site, then you will be interested to read it.
Browser inconsistencies. As web developers, you encounter them every single day. They have become an integral part of our work and very often influence the way in which we solve some problems. But most importantly, all these edits take a tremendous amount of valuable time, even with such great development tools as Firebug. People who do not work every day with html and css, will hardly be able to understand all these subtleties and the essence of inconsistencies.
')
From left to right: Firefox, Opera, Safari, IE7 and IE6
Recently, I was faced with a very interesting case, which is not so often met in the press. And not that it was very significant or even clearly erroneous, but I just really want to draw your attention to it. It, however, shows all the power of the browser mismatches to each other. And most importantly, this is a very simple and clear example, even for those who are not very versed in the nature of css.
Look at the links
Links are the most important part of today's Internet, its cornerstones. The <a> tag must be the strongest in the html specification. And we all know that links are underlined. And all browsers apply standard styles, so the links are underlined. So far so good.
An underline is so easy! You just need to draw a line below the text. But where exactly is the “bottom”? I conducted a quick test, which resulted in quite similar results. All browsers agreed that the line below the text should be located within the line height of the linear ( inline ) element, and it should not require additional vertical space. The only minor inconsistency was noticed for Firefox, which placed the line 1px lower than other browsers. Not so bad.
Testing again
When I documented this distinction for Firefox, something pushed me back to the test page. All browsers placed a line at 1px above the bottom line ( absbottom ) of the text line. But is it really 1px or is this value calculated relative to the font size? I conducted additional tests with an increased font size (if you take them again, increase them to the maximum), the results were very interesting.
All browser families behaved differently. Firefox still draws a line at the bottom of the line; Opera’s drawing put it 1px above that line. Safari positioned the line 1px below the baseline of the text, and IE (6 & 7) positioned it somewhere between the baseline and the bottom border. For all that, not all browsers increased the size of the underscore itself. There were 4 different behaviors for 4 different browsers. Super!
So?
As I said, this effect is quite small, and you will not notice it until you specifically notice the differences between browsers or increase the font size quite significantly. But the effect, no doubt, manifests Even such a simple thing as underlining text, the basic feature of any browser, is implemented completely differently in modern browsers.
In this light, only the implementation from Firefox can be viewed as disastrous, since in his case the underscore affects the border of the underlying element if it is not appropriately styled. This naturally reduces the visual perception of such links.
And these are the things we work with every day!
Thanks to everyone who read the translation. In the comments to the original article, it is proposed to use the border in relative units for link styling, but then the problem related to Firefox will manifest itself in all browsers. In general, I will be glad to your comments.
Web Optimizator: checking the speed of loading sites
Source: https://habr.com/ru/post/31367/
All Articles