Monthly Archives: March 2012

CSS3: From Knowledgable to Ninja – Part 4 Media Queries

If you’ve ever used a print stylesheet you’ll be familiar with the idea of creating a separate stylesheet to come into play under certain conditions. in CSS2 there were media types, which lets you specify a type of media to target.

<link rel='stylesheet' type='text/css' media='screen' href='css/styles.css' />
<link rel='stylesheet' type='text/css' media='print' href='css/print.css' />
@media screen {
  p {font-family:sans-serif;}
@media print {
  p {font-family:serif;}

CSS3 Media Queries

In CSS3 they extend the idea but instead of targeting a media type they target the capability of the device. Such things it can target are:

  • width and height (of the browser window)
  • device width and height
  • orientation – for example is a phone in landscape or portrait mode?
  • resolution

creating and linking to a separate stylesheet

@media screen and (max-device-width:480px) {
  #wrapContent {width:400px;}

This style targets screen devices that have a max width of 480px (i.e. iPhones) to make #wrapContent 400px wide. for this to work we would need to place this at the end of our stylesheet so it will overwrite any styles we’ve set up for the browser.

If you’re going to have a lot more styles and want to use a separate stylesheet you can use the following.

<link rel='stylesheet' type='text/css' media='only screen and (max-width: 480px)' href='smartphone.css' />

CSS3: From Knowledgable to Ninja – Part 3 Generated Content

before and after

::before and ::after
before and after are pseudo-elements, essentially you get two free stylable faux elements for every non-empty element.

p:before {content:"before content - "; font-weight:bold;}
p:after {content:" - after content"; font-weight:bold;}

<p>the content</p>

before content - the content - after content


element:before {content:”REQUIRED”;}

Although the content declaration is required, the value can be empty. Below are the values the content declaration accepts.

element:before {
  content:'';                    /* empty */
  content:" (.pdf) ";            /* any text */
  content:"\2603";               /* unicode */
  content:" (" attr(href) ")";   /* attributes */
  counter-increment:name;        /* counters */

special characters

Copy Paste Character is one example website with lots of characters you can copy, add this with an Entity Conversion Calculator and you’ve got the tools needed to make some generated content.

View the demo

attribute values

You could use this in the print style sheet, generating the URL for all links.

a[href^=http]:after {content:attr(href);}

There are a lot of clever ways you can use generated content. Some of the use cases I’ve seen are quote, speech bubbles and tooltips.

CSS3: From Knowledgable to Ninja – Part 2 Specificity

understanding specificity




Estelle Weyl handed out a great reference guide to specificity or in this case speciFISHity where an ID is like a shark, a class is like a fish and an element is like plankton – literally Plankton from Spongebob Squarepants! inline styles are like the BP oil spill and !important blows them all out of the water.

The * selector, or global selector, has no value.

* {} 0-0-0

Combinators, like ~, >, and + have no value

ul li {} 0-0-2
ul > li {} 0-0-2

:not has no value, but parameter selector does

.myClass:not(p) {} 0-1-1

Specificity is not inheritance.