Skin Conditions

If you want a certain chunk of CSS loaded only in particular situations, you can create a skin with a specific set of conditions. We'll load that skin only when needed. The conditions we have available are:

• What It Does

  add on to the archive style

  What you want 95% of the time. Will be loaded after the official archive style.

  replace the archive style

  Useful for complex skins where you don't want most of the default style underlying your work. (You can use the parts you want to keep as parents.)

• Parent Only

  This option is mainly to help keep the skins listing tidy. If you select this, neither you (nor anyone else) will be able to use this skin directly: it will only be used as a parent. The skin (even if made public) will not be listed in the main skins listing, only in the description of skins where it is used as a parent. This makes it much easier to make components available for people to use without cluttering up the skins listing with skins that wouldn't actually work right if someone tried to use them alone. :)

• Media

  You can choose more than one media. Media stylesheets will only be loaded if whatever device you're browsing on supports that particular media type. For instance, not all screenreaders load "speech" stylesheets. If your device doesn't load your skin, try using "all" or "screen" instead (or drop us a Support request if you need help).

  all

  What you want 95% of the time. Loaded for all devices. (Some very old browsers don't understand "all" and require "screen".)

  screen

  Loaded for computer screens. (And usually for any device that doesn't support other media categories.)

  handheld

  Will be loaded only for mobile devices and/or small screens.

  speech

  Will be loaded only for screenreaders.

  print

  Will be loaded only when the page is printed.

  braille, embossed, projection, tty, tv

  See the W3C media specs for details.

  only screen and (max-width: 450px)

  Loaded for iPhone (it doesn't load handheld stylesheets otherwise)

• IE Only

  If you leave this blank, your skin will be loaded for all browsers. If you choose one of these options, your skin will be loaded only for Internet Explorer browsers. This lets you add IE-specific overrides.

  IE

  Will be loaded for any Internet Explorer browser.

  IE5, IE6, IE7, IE8, IE9

  Will be loaded only for this particular version of the Internet Explorer browser.

  IE8_or_lower

  Will be loaded for IE8 and below

Interaction With Parents

If you also use skin parents, you can give conditions to particular parents, and then make a skin that acts differently for different browsers. For instance, if you have one parent skin that holds most of your CSS, one that is IE-only, one for media "handheld" and one that uses the media "print", then your final skin will load each parent as appropriate based on the final user's browser!