Unquoted font family names in CSS

CSS

Are the quotes in font-family: 'Comic Sans MS' required, or not?

According to the the CSS validator, the quotes are supposed to be there in this case because the font family name contains spaces:

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

However, this is an error in the CSS validator. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works the way you’d expect it to.

In reality, it’s a bit more complex. To grok the rules on font family names, we need to understand the difference between CSS strings and identifiers first.

Strings and identifiers

The spec says the following about strings:

Strings can either be written with double quotes or with single quotes.

Identifiers are defined as follows:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters[a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_).

ISO 10646 defines the Universal Character Set, which correlates to the Unicode standard. Note that they’re actually talking about the hyphen-minus character — not the hyphen character, which is U+2010. The code point for hyphen-minus is U+002D, and for underscore (low line) it’s U+005F. The highest code point currently allowed by Unicode is U+10FFFF. So, any character matching the regular expression [-_\u00A0-\u10FFFF] is allowed in an identifier.

The spec continues:

[Identifiers] cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code […]. For instance, the identifier B&W? may be written as B\&W\? or B\26 W\3F .

Translated into regex: any string that matches ^(-?\d|--) is not a valid CSS identifier.

Whitespace

Both the CSS 2.1 and CSS3 Fonts Module Level 3 specs say:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Note: “a sequence of one or more identifiers” implies that multiple space-separated identifiers will form a single font family name. Therefore, font-family: Comic Sans MS is valid, and equivalent to font-family: 'Comic Sans MS'. The former consists of three space-separated identifiers, the latter is simply a string.

This is clarified a few paragraphs down in the spec:

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.

The aforementioned CSS validator warning describes what happens if leading or trailing whitespace is used around identifier sequences:

[A]ny whitespace characters before and after the name are ignored, and any sequence of whitespace characters inside the name is converted to a single space.

This is implied by the spec text, too: an unescaped whitespace character can never be part of an identifier, so it can never start a “sequence of identifiers”.

Generic family keywords

The spec defines the following generic family keywords: serifsans-serifcursivefantasy, andmonospace. These keywords can be used as a general fallback mechanism, in case the desired font choices are not available. Authors are encouraged to append a generic font family as a last alternative for improved robustness. As keywords, they must not be quoted.

In other words, font-family: sans-serif means that a generic sans-serif font family will be used, whilefont-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif. A very important difference!

Other keyword values

The same behavior applies to a few other keywords, too:

Font family names that happen to be the same as a keyword value (inheritserifsans-serifmonospace,fantasy, and cursive) must be quoted to prevent confusion with the keywords with the same names. The keywords initial and default are reserved for future use and must also be quoted when used as font names. User agents must not consider these keywords as matching the <family-name> type.

Note that all keywords are case-insensitive. For example, Monospacemonospace, and mOnOsPaCe all refer to the same keyword, and if you want to use a font with that exact family name rather than the default keyword value, you’ll need to quote it.

Summary

As long as the only disallowed characters in an otherwise valid identifier are single U+0020 space characters, and all space-separated parts are valid identifiers too, the identifier sequence can be used as an unquoted font family name (unless it’s a keyword, but there are no keywords with spaces in them).

If a font family name matches a keyword, it must be quoted to form a string.

If you want to use an invalid CSS identifier as (part of) a font family name, you’ll need to quote it to form a string instead; or you could just escape any special characters so it can remain an unquoted identifier.

Here are some example font-family declarations:

/* Invalid because `/` is not allowed in an identifier: */ font-family: Red/Black;
 /* Valid — an escaped `/` symbol is allowed in an identifier: */ font-family: Red\/Black;
 /* Invalid because a string cannot be combined with an identifier: */ font-family: 'Lucida' Grande;
 /* Valid — it’s a single string: */ font-family: 'Lucida Grande';
 /* Valid — it’s a space-separated sequence of two identifiers: */ font-family: Lucida Grande;
 /* Valid — it’s still a space-separated sequence of two identifiers: */ font-family: Lucida     Grande;
 /* Invalid because `!` is not allowed in an identifier: */ font-family: Ahem!;
 /* Valid — it’s a string: */ font-family: 'Ahem!';
 /* Valid — an escaped `!` is allowed in an identifier: */ font-family: Ahem\!;
 /* Invalid because an identifier cannot start with a digit: */ font-family: Hawaii 5-0;
 /* Valid — it’s a string: */ font-family: 'Hawaii 5-0';
 /* Valid — `\35 ` (including the space) is an escape sequence for `5`: */ font-family: Hawaii \35 -0;
 /* Valid — `\ ` (including the space) is an escape sequence for ` `: */ font-family: Hawaii\ 5-0;
 /* Invalid — `$` is not allowed in an identifier: */ font-family: $42;
 /* Valid — an escaped `$` symbol is allowed in an identifier: */ font-family: \$42;
 /* Valid — `€` is allowed in an identifier: */ font-family: €42;

Bonus puzzle: Other than keywords, I can only think of one font family name that can’t be used without quotes — there is no way to escape it in an identifier. Do you know which one?

Posted by: Dhiraj kumar

10 CSS shorthand tips and how to optimize CSS

cssIf you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips.

These tips and tricks apparently don’t seem to be so important at the first sight. But once you write thousands of CSS lines you will wish to optimize every single line.

Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller.

Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS file. So let’s have a look at some examples and see exactly how we can optimize a CSS file.

1. Background properties in one line

Defining a background property could be made in an easier way than we often happen to see.

Why using:

 background: url(example.gif);
 background-color: #eaeaea ;
 background-repeat: repeat-x;
 background-position: top left;

… when you could easier write:

background: #eaeaea url(example.gif) repeat-x top left;

2. Border property

When all of the border widths are the same, instead using:

border-color: red;
border-width: 1px;
border-style: solid;

… you can simply write this:

border: 1px solid red;

3. List properties

The following list properties:

list-style-position: outside;
list-style-image: none;
list-style-type: disc;

… could be simplified into:

list-style: disc outside;
/* shorthand notation for list properties */
/* list-style: [list-style-type] [list-style-position] [list-style-image];*/

4. Font and line-height properties

Font and line-height properties like the ones below:

font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;

… can be easily transformed into:

font: bold italic 1em/1.5em Arial, Helvetica;

Much simpler huh? 🙂

5. Margin and padding properties

This example applies for margin and also for padding, so next we’ll use as example the CSS margin property.

/* top=10px, right=5px, bottom=15px, left=20px */
margin: 10px 5px 15px 20px;

/* top=10px, right=5px, bottom=10px, left=5px*/
margin: 10px 5px;

/* top=10px, right=5px, bottom=15px, left=5px*/
margin: 10px 5px 15px;

Now let’s see what else we can do to write optimized CSS:

6. Always remember that “0″ anything equals to “0″

Use the “0″ value instead 0px or 0em so instead the the following CSS properties

margin: 0px;
padding: 0em;

you could use:

margin: 0;
padding: 0;

7. Use shortcuts for hexadecimal colors

White color equal to “#ffffff” or just “#fff”, #aabbcc can be wrote like #abc and so on.

8. Simplify non integer CSS values

Instead writing 0.5em you can use .5em, 0.5px is equal to .5px

9. The last property semicolon it’s not required?

div{
margin: 0;
padding: 0 /* note that you can skip the last rule semicolon, and yes it passes W3C validation */
}

10. Floated elements inherits “display:block” declaration

When floating an element there’s no need to add also “display: block” declaration as we often see. This is helpful for avoiding redundancy and save us one line of CSS.

These are some CSS shorthand tips I often use and they are very helpful for me, when coding CSS. I hope they will also help you writing shorter, better CSS code.

Over to you

What do you think about the tips I presented above and what else do you use for optimizing the CSS file?

Posted by: Dhiraj kumar

Things you should know about CSS anatomy

I often notice people tend to use stylesheets without knowing its structure meaning. That’s why, in this tutorial I will try to present you the CSS components structure.

css-structure-anatomy

1.Selectors

The selector is the element that is linked to a particular style.In the following example the selector is “p”, so “p” is the element who’s margin properties will be “0″.

p{
  margin: 0;
}

Class Selectors

The advantage of a class selector is that it can be applied to more than one elements according to W3C recommendation.

.colored{
  color: red;
}

Having this, all paragraphs who’ll have “colored” class as attribute will inherit red color from stylesheet.

ID Selectors

The id attribute assigns a unique identifier to an element, so try assigning an id attribute to no more than just one element.

If you’ll assign a CSS id to more elements within a page you will fail the W3C Markup Validationwhich is very important for you, as a designer.

#colored{
  color: red;
}

Contextual Selectors

p#colored span{
  color: blue;
}

This selector is applied to all “span” elements within the paragraph with “colored” id attribute.

Result:
blue-css-example

2.Properties

Now that we know how a selector looks like let’s see what is a CSS property. CSS properties defines how the styles should look on the Web page or elsewhere.

Examples: margin, padding, color, border, background etc.

In this example, the h1 element has three properties: color, font-family and margin. These properties with theirs values defines how the h1 element will look.

h1{
  color: red;
  font-family: Verdana;
  margin: 10px 0;
}

Conclusion

Using the selectors properly you will not only have a cleaner markup but you will also have a more beautiful CSS code.

Posted by: Dhiraj kumar