Unusual WebKit bug with CSS selector
Many webmasters use css selectors of the form [href ^ = ”http: // somedomain” to give the design to the links so that the links to a specific address are arranged in different ways without using classes.
In one admin, I used such a selector to add an icon to a link depending on the url. However, on Google Chrome 17 I ran into a bug that all links have the same icons. In all other browsers (including IE8 and Safari 5.1), everything is fine. Below is a screenshot with the simplest example.
For the sake of simplicity, I have removed all unnecessary from the code.
Check in your browser here .
')
As you can see from the example, in the pseudo-element, we assign a different color depending on the content of the href attribute (links to edit, delete). Fiddling with the code, I noticed that this bug in Chrome does not come out everywhere. As a result, I found out that for repair it was enough that a “different” style was applied to the links. I write different in quotes on purpose.
For example, just add the following line:
What to write in this style does not change the essence, for example, you can write and it will work too.
The result is here .
Bug tested in version 16 and 17.
UPD 1: I just discovered that even a non-existent css style is enough for fix.
Instead of anytag, you can write anything, any existing or nonexistent tag. An example .
UPD 2: Checked in older versions. The bug appeared only from version 16, i.e. webkit 535.7 . As they say in the comments , for Safari 5.2 beta the bug is relevant.
UPD 3: https://bugs.webkit.org/show_bug.cgi?id=79774
UPD 4: Starting with Google Chrome 24, the bug is fixed.
In one admin, I used such a selector to add an icon to a link depending on the url. However, on Google Chrome 17 I ran into a bug that all links have the same icons. In all other browsers (including IE8 and Safari 5.1), everything is fine. Below is a screenshot with the simplest example.
For the sake of simplicity, I have removed all unnecessary from the code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .page_edit a{display:inline-block;} .page_edit a:before{content:"";display:inline-block;width:20px;height:16px;} .page_edit a[href*="update"]:before{background:blue;} .page_edit a[href*="edit"]:before{background:green;} .page_edit a[href*="delete"]:before{background:red;} </style> </head> <body> <div class="page_edit"> <a href="/news/update/1014"></a><br> <a href="/news/delete/1014"></a><br> <a href="/news/edit/1014"></a> </div> </body> </html> Check in your browser here .
')
As you can see from the example, in the pseudo-element, we assign a different color depending on the content of the href attribute (links to edit, delete). Fiddling with the code, I noticed that this bug in Chrome does not come out everywhere. As a result, I found out that for repair it was enough that a “different” style was applied to the links. I write different in quotes on purpose.
For example, just add the following line:
a + a {font-weight:normal;} What to write in this style does not change the essence, for example, you can write and it will work too.
a + a {outline:none;} The result is here .
Bug tested in version 16 and 17.
UPD 1: I just discovered that even a non-existent css style is enough for fix.
anytag+a{} Instead of anytag, you can write anything, any existing or nonexistent tag. An example .
UPD 2: Checked in older versions. The bug appeared only from version 16, i.e. webkit 535.7 . As they say in the comments , for Safari 5.2 beta the bug is relevant.
UPD 3: https://bugs.webkit.org/show_bug.cgi?id=79774
UPD 4: Starting with Google Chrome 24, the bug is fixed.
Source: https://habr.com/ru/post/138960/
All Articles