CSS Tips
Introduction
Earlier in the month I did a post on using CSS in Sitefinity. This is a short follow up on a few more things you may not know about that may help you out to create a better performing Sitefinity site.
I thought I would note down some of CSS tips I tell people when asked. Hopefully some of these may be new to you.
CSS Selectors
The first rule we should learn as CSS creators is the fact that browsers search for elements from right to left.
Take the below example.
#MyId .myClass a { my:style; }
Most of us read this as 'Find the element with an Id of MyId then under that all the myClass's and under that any a elements. We are narrowing our search.
But.
Browsers actually find all the a elements first. Then check if they have a parent of myClass and then have a parent of MyId.
So this CSS is not very efficient.On my part I tend to stick very much to classes and always avoid ending a selector in a element.
A great article on this topic can be found by Chris Coyier
DNS Prefetch
Today we often use and are encouraged to use CDN's. And you may find that you are starting to mount up on all the different domains. This isn't bad. It is good. But for every domain we need to do a DNS lookup which does take some time. One way to speed up your page is to look up that DNS in your head tag. Then later in the page when you have a reference to it, the DNS lookup will already be done.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
If you have references in your head tag then you get a small lookup head start. If you have them at the end of your page, (script references), then it will most likely be already done by the time it is required to fetch the resource.
Prefetch
If you use web fonts you may know that these are downloaded when they are are parsed and required by the CSS. Just like the dns-prefetch you can prefetch your fonts by placing them in your head tag.
<link rel="prefetch" href="webfont.woff">
Thus, hopefully, the resources will already be present and the parsing won't have to wait for the font to be downloaded.
Thanks for reading and feel free to comment - Darrin Robertson
If I was really helpful and you would buy me a coffee if you could, yay! You can.
Leave a comment Load more commentsMake a Comment