// HACKER NEWS — CYBERSECURITY
CSS Curiosities of the Past
The ebbs and flows of the web have gotten us to where we stand today. We simply wouldn’t have the web we do without the journey it has taken us to get here. However, some of the steps it has taken to get here have been interesting to say the least.
CSS is how we style things on the web, but since its inception it has been made, on occasion, to wear a few more hats. It has taken on odd roles and picked up behaviours it probably ought not to have. Such is life.
As I’ve detailed odd and context-specific HTML, this is a look at CSS largely outside the specifications. Browser-specific hacks, technology-scoped syntax, and engine-exclusive snippets forged from questionable circumstances, corporate complications, and esoteric implementations.
Most browsers, correctly, would treat a property prefixed with an asterisk as invalid. However, Internet Explorer 7 and earlier would treat it as valid. It was so famous it garnered the name ‘star hack’ for the shape of the asterisk. Likewise, when prefixing a property with an underscore or hyphen, only Internet Explorer 6 would treat it as valid. There were many more similar hacks used, the vast majority of which are best documented at the eponymous browserhacks.com. The main gist is that some browsers would incorrectly parse properties, selectors, and values, and that could be used for gain in an era where browser behaviour was rather varied.
Limiting CSS to apply only in certain browsers with conditional comments in CSS files, such as could be done in HTML documents, wasn’t possible.1 Therefore, this exploitation of questionable parsing of what is and isn’t valid was commonplace for targeting specific browsers.
Internet Explorer 7 and earlier would treat almost any textual string prefixed by an exclamation mark as !important. Most commonly, people would make use of this by writing !ie to have a style only override specificity in Internet Explorer. As far as Internet Explorer was concerned, the arbitrary !banana and the specced !important were the same, while other browsers correctly only accepted the latter.
There was another related bug in Internet Explorer 6 and lower where a style declared later in the same block would overwrite an !important value. For example, here the colour would be black rather than white, as it should be:
There were so many ways in which you could identify what browser was in use on a document level via CSS. Some examples include:
This approach was often messy to use, as it meant writing multiple descending selectors to try to target elements in specific browsers only.
Until version 8, Internet Explorer had a concept called hasLayout. An internal flag, it would designate whether an element was responsible for rendering itself (true) or if a parent element would be responsible for it (false). Naturally, this was an obtuse and confusing system. Some elements, such as ![]()
,