As you probably know, if you will to use :before
and/or :after
pseudoelements without setting text in it, you still have to declare content: '';
on them to make them visible.
I just added the following to my base stylesheet :
*:before, *:after {
content: '';
}
...so I don't have to declare it anymore further.
Apart from the fact the *
selector is counter-performant, which I'm aware of (let's say the above is an example and I can find a better way to declare this, such as listing the tags instead), is this going to really slow things down ? I don't notice anything visually on my current project, but I'd like to be sure this is safe to use before I stick it definitely into my base stylesheet I'm going to use for every project...
Has anyone tested this deeply ? What do you have to say about it ?
(BTW, I do know the correct CSS3 syntax uses double semicolons (::before
, ::after
) as these are pseudoelements and not pseudoclasses.)
My answer is: I don't know, but one can test that.
Read about Navigation Timing and check out this example page
The most simple example of usage:
So, go generate a few MB of html full of random tags, and test.
So I ran some tests based on @SWilk's advice. Here's how I did it :
1) Set up a basic HTML page with an empty
<style>
tag in the<head>
and the simple example he provided in a<script>
tag at the bottom of the<body>
:2) Fill up the
div.container
with loaaads of HTML. In my case, I went to html-ipsum.com (no advertising intended), copied each sample, minified it all together, and duplicated it a bunch of times. My final HTML file was 1.70 MB, and thediv.container
had 33264 descendants (direct or not ; I found out by callingconsole.log(document.querySelectorAll('.container *').length);
).3) I ran this page 10 times in the latest Firefox and Chrome, each time with an empty cache.
Here are the results without the dreaded CSS ruleset (in ms) :
(If you're wondering why there's such a difference between those two, I have much more extensions on Firefox. I let them on because I thought it would be interesting to diversify the testing environments even more.)
4) Add the CSS we want to test in the empty
<style>
tag :...and start again. Here I'm specifying every tag used in the page, instead of
*
(since it is counter-performant in itself, and we want to monitor the pseudo-element triggering only).So, here are the results with all pseudo-elements triggered (still in ms) :
According to these numbers, we can conclude the page load is indeed slower (of about 400-500 ms) when declaring
content: ''
on every pseudo-element.Now, the remaining question now is : is the extra load time we can see here significative, given the relatively big test page that was used ? I guess it depends on the size of the website/project, but I'll let more web-performance-knowledgeable people give their opinion here, if they want to.
If you run your own tests, feel free to post your conclusions here as well, as I'm very interested in reading them - and I think I won't be the only one.