Subscribe

Close

Thank you for visiting!

Please consider subscribing to the RSS feed or following me on Twitter.

Archive for CSS:

Repeat Every 6th Element Pattern With nth-child

Let's say you've got a set of elements where you want to match a pattern and give every other three a different style, illustrated like this:

Repeat every 6th pattern

Enter CSS3's nth-child. Repeat every 6th element pattern, like this:

li:nth-child(6n+4),
li:nth-child(6n+5),
li:nth-child(6n+6) {
    background-color:#f0f3f5;
}

Check if Bootstrap CSS is Loaded and Provide Local Fallback

When a CDN somehow fails, you want to make sure you can load a local fallback.

Here's a snippet to check if Bootstrap CDN is down, and then proceed to load a local Boostrap fallback version, utilizing Boostrap's hidden CSS class.

If Bootstrap is loaded, the span will be hidden. We simply check if it is hidden, and if it aint - we assume Bootstrap wasn't loaded from CDN and load our local fallback instead.

Run this script after you've tried to load Boostrap from a CDN.

var $span = $('<span class="bs hidden"></span>');
var $bs = $('body').append($span).find('.bs');

if ($bs.css('display') !== 'none') {
	$("head").append('<link rel="stylesheet" href="/css/Bootstrap/bootstrap.min.css">');
}
$bs.remove();

Other, more sofisticated methods, depend on libraries like yepnope or requirejs. Meanwhile, this method works just fine.

Regarding style sheets and the title attribute

When linking to external style sheets and using the title attribute, you have to be a bit careful. I'll explain to you how to correctly link to external style sheets.

Normally, you link to an external style sheet like this:

<link rel="stylesheet" type="text/css" href="/css/main.css"
	media="screen,projection" />

Perfectly fine!

However, you'd like to add a print stylesheet to, using media="print":

<link rel="stylesheet" type="text/css" href="/css/print.css"
	media="print" />

Now, this too works fine. However - when you want to use the title attribute with your style sheets, you have to be careful.

The title attribute is great to use if you want simple style switching and alternative style sheets. But you need to know what you do to get it to work!

In this code, the print style sheet will not work, it won't be triggered in different browsers:

<link rel="stylesheet" type="text/css" href="/css/main.css"
	media="screen,projection" title="Default stylesheet" />
<link rel="stylesheet" type="text/css" href="/css/print.css"
	media="print" title="Print stylesheet" /> 

It's because the print style sheet's title attribute has a value. If the value is removed, or the whole title attribute, the print style sheet will work.

This happens because there are three different types of style sheets - and if an external style sheet is of the wrong kind - this style sheet will simply be ignored.

Three different types of style sheets

The three types of style sheets are:

  1. Persistent, which is a kind of default style sheet. No title attribute is needed.
  2. Preferred, which is the style sheet web browsers apply. Title attribute is needed.
  3. Alternate, which is alternatives to already existing style sheets. Title attribute is needed.

If these are mixed up, things might not be working as expected. Here's more on specifying external style sheets.

Conclusion

If you want your style sheets to work, make sure they're of the correct style sheet type. This final example works very well:

<link rel="stylesheet" type="text/css" href="/css/main.css"
	media="screen,projection" title="Default stylesheet" />
<link rel="stylesheet" type="text/css" href="/css/print.css"
	media="print" />

5 quick tips to write better CSS

By following a set of rules, you can improve your CSS skills. Here are five of my quick tips on how you can write better CSS.

Use the cascade

When writing your CSS, make sure you make the best use of the cascade. A lot of classes and id attributes aren’t necessary for HTML elements in order to style them with CSS.

Look at this HTML code example:

<div id="header">
<h1 id="topheading">An awesome CSS example</h1>
<p id="headerintro">Lorem ipsum dolor...</p>
</div>

CSS for the HTML above could look like this:

#header { background: #f1f1f1 }
#topheading { font-size: 2em; font-weight: normal }
#headerintro { font-size: 0.9em; font-weight: bold }

Not only is the HTML code bloated with unnecessary id attributes, but the cascade in CSS isn’t particularly well used.

How you can use the cascade

#header { background: #f1f1f1 }
#header h1 { font-size: 2em; font-weight: normal }
#header p { font-size: 0.9em; font-weight: bold }

By using this CSS code, all id attributes and classes can be removed from the HTML elements inside the header div.

Using the cascade in CSS will save you time and good code will make the job for you.

Sort your properties

You should sort your CSS properties alphabetically. It’s easier to read, easier to maintain and easier to extend CSS rules when the properties are sorted alphabetically.

Try to find a property fast in this rule:

#content {
float: left;
width: 700px;
margin: 10px;
background: #f1f1f1;
padding: 5px
}

It isn't very easy. It's much easier when the properties are sorted.

Alphabetically sorted CSS properties

#content {
background: #f1f1f1;
float: left;
margin: 10px;
padding: 5px;
width: 700px
}

Sorted properties will make it easier for you to find what you are looking for, giving you more time to produce even better code.

Structure properly

You should structure your CSS code properly. Once you’ve come up with a good method to structure your style sheets, stick with this method.

Here’s a simple list on how you can structure your style sheets better:

  • Decide how to write your properties – should you put them all on the same line or put each property on a new line?
  • Write global styles first. Overall rules for headings, links, forms and similar.
  • Structure sections in the order they appear in the HTML code. Example: write CSS rules for the header before the footer and left menu before the content.
  • Tab nested rules. It’s always a good idea to use tabs when coding, even style sheets. This is great for readability and works better the larger a style sheet grows.

How you can structure some basic CSS code

body { }
h1,h2,h3 { }
h1 { }
h2 { }

#wrap { }

#header { }
#header #logo { }

#content { }
#leftmenu { }
#maincontent { }
#related { }

#footer { }

Use CSS shorthand

You can minimize your CSS rules by using CSS shorthand. Instead of writing rules like this:

#leftmenu {
background-color: #f1f1f1;
background-image: url(/gfx/bg.png);
background-repeat: no-repeat
background-position: 0 50%;
background-attachment: fixed
}

You can write rules like this:

#leftmenu { background: #f1f1f1 url(/gfx/bg.png) no-repeat 0 50% fixed }

This second shorthand rule is exactly the same as the extended one above.

CSS shorthand can make you more efficient and will make your CSS look better and more organized.

You can use CSS shorthand for background, border and font, amongst other CSS properties.

Dustin Diaz has compiled a great reference on CSS shorthand properties.

Use comments

Comments have several benefits, such as improving the structure. Comments also

  • Make it easier to divide your style sheet into specific sections, making the sections easier to find.
  • Improve the readability and make the style sheet easier to maintain.

How you can comment your CSS code

/* HEADER */
#header { }

/* CONTENT */
#content { }

/* NAVIGATION */
#leftmenu { }

Choose a coding style and stick to it

It’s important you choose a coding style that suits you and that you stick to it. Maybe you also have more tips to share?

To the top