- If you accidentally push broken code your interactive elements stop working completely. And if that’s a menu for example, your users are screwed
- A lot of these interactive elements use 3rd party libraries which are very heavy, jQuery for example. In a world where mobile device browser share is huge page weight is important
With the ever diminishing share of Internet Explorer 6, 7 and 8 users we can now start making use of more advanced CSS selectors to perform this task.
:checked – To determine which form element is currently checked
:nth-child & :nth-of-type – To link the currently checked element to the correct item
~ – The sibling selector to make sure we only select the siblings of the checked item so if elements are nested we don’t get conflicts
In it’s simplest form the implementation looks something like this…
Of course this isn’t what form elements were originally intended to do so there may well be some concerns, most likely around accessibility but I believe these can be addressed with good use of ARIA attributes so do make use of them.
And now on to a few examples.