CSS Tips

Jul 24

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.


Darrin Robertson - Sitefinity Developer

Thanks for reading and feel free to comment
Darrin Robertson


Leave a comment
Load more comments

Make a Comment

Please type the code above

comment-avatar