Geekly Articles each Day
📜 ⬆️ ⬇️

Crossbrowser pseudo-class problems: active



With the advent of many innovations in the layout of web pages, developers have the opportunity to partially replace JavaScript, using HTML / CSS for greater performance and extensibility of the interface of their portals.
In addition to problems with cross-browser compatibility and different implementations of new CSS properties, we often have to deal with other problems in places where it would seem that everything settled down for a long time and works the same everywhere. It was with this problem that I had to deal with using CSS transitions together with the pseudo-class: active. Apparently due to the fact that in the documentation there is no description of the parents' behavior of the element in the state: active, this behavior is implemented differently in different browser engines.

Task


Cross-browser to decorate the child of the active element (parent), with the ability to activate the parent by clicking on any child ( my example is on jsfiddle , and on dabblet ).

Prototype


Given the potential difficulties and inconsistencies of behavior in different browsers, we make a working prototype for cross-browser verification.
') 
span { display: block; position: relative; width: 60px; height: 60px; background: red; } b { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; background: blue; } i { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: green; } 

 <span><b><i></i></b></span>


In spherical vacuum


The specification states that the active element (com. Div: active) is the one that is clicked, but it says nothing about how the active state is inherited. We do an experiment, and we look, as in the real world, active elements behave, a link to the page with an experiment on Jsfiddle (on dabblet ).

First problems


In the first case, in webkit, FF 3.6+ and opera, we see that the active state is inherited by all parents, up to <html>, but when you need to track more than 1 active element, the opera can no longer cope, and only the first parent inherits the active state DOM decorated with pseudo-class: active (span: active)

 html:active { background: #ededed; } /* Light gray */ .test1-2 span:active { background: yellow; } 

 <div class="test1-2"><span><b><i></i></b></span></div>



In the Interner Explorer, the active state is not inherited at all, and works only when clicking on an element decorated: active with a pseudo-class (in the experiment it is <span>), and in versions up to the 7th, inclusive,: active only works on links.



That's not all


In the second case, I used a cascade from the active element (span: active b), as we can see in the example webkit and ff, everything works as expected, clicking on any element down the DOM from the pseudo-class decorated style highlights the desired element defined by cascade . Opera in this case begins to behave like IE, ceasing to inherit the active state and working only with the element on which the click is directly happening.

 html:active { background: #ededed; } /* Light gray */ .test2 span:active b { background: yellow; } 

 <div class="test2"><span><b><i></i></b></span></div>




Weapons for battle


In the third example, we managed to force the opera to inherit the active state from the child for use in the cascade, using an absolutely positioned element (<em class = "pseudo">), which is based on the element decorated by the pseudo-class: active. FF and webkit still work predictably here, but IE8 + is still not in the works.

 html:active { background: #ededed; } /* Light gray */ .test3 span:active b { background: yellow; } em.pseudo { content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

 <div class="test3"><span><b><i></i></b><em class="pseudo"></em></span></div>

To make IE work as we need, and improve the code a bit, we replace the absolute element with a pseudo-element. As it turned out, in IE, the active state is still inherited, but only on the pseudo-elements :: before, :: after. Unfortunately, in IE8, pseudo-elements ignore z-index, which may not work in most cases (as in mine), but in IE9 + everything is fine.

 html:active { background: #ededed; } /* Light gray */ .test4 span:active b { background: yellow; } .test4 span:after { content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

 <div class="test4"><span><b><i></i></b></span></div>​



Mission over, back home


As a result, we forced all elements of the same to inherit the active state cross-browser (IE9 +, FF 3.6+, Opera 9.64+, Chrome, Safari and other webkits) and now we can easily implement the functionality on the portal.
Since the functionality carries a purely decorative role, we decided to abandon IE6-8, leaving them with a soft fallback, and do the rest on CSS.

P.S.


Without cascade


It can be easier to solve the problem in IE8 and Opera, abandoning the cascade, which in my case did not fit, and reduced the extensibility of the functional, so I decided to abandon the realizable beauty in IE8.

Explanation of the problem


The only normal way to track a click on CSS, in my example, without using Java Script, was the pseudo-class: active. It was possible to use: focus, substituting form elements for existing blocks, but this solution is much harder for the load, and in the end, it still required a Java Script file.

Touchpad


When clicking from the touchpad, the element is noticeably less than the time is in the active state, in contrast to the click from the mouse.

Source: https://habr.com/ru/post/138864/

More articles:


All Articles