Tag: css

I have never used the counter or increment properties since they aren’t supported in IE7 or earlier, nor are the :before pseudo elements, or content property. Since IE8 does support all of these, soon we may be able to include these CSS properties, so I thought I would explain them.

The <ol> start attribute and <li> value element were deprecated in HTML 4.01 and not supported in XHTML strict. The value attribute set the number of a list item, enabling the following list items to increment from that value. While there is no (X)HTML replacement for these elements, CSS 2.1 provides methods for setting and incrementing counters on any element, not just <li>’s. This article focuses on the following CSS pseudo elements and properties:

• content CSS property
• :before pseudo-element
• :after pseudo-element
• counter-increment CSS property
• counter-reset CSS property

The content property is used in conjunction with the :before or :after pseudo-elements. The value of the content property is added to the visual layout of your document, but is NOT added to the DOM. If you’re reading this tutorial, you should already know that! We’re discussing :before, :after and content here because without them, the counter is kind of useless: if you’re not going to display the content of a counter before (or perhaps after) an element, why include it?

Overview of content property

To make understanding this tutorial easier, we are going to use the concrete example of adding ” – <hrefValue>” after every link, which is helpful when using print CSS.

<ul id="showlinkafterlink">
  <li><a href="http://www.yahoo.com">Yahoo</a></li>
  <li><a href="http://www.google.com">Google</a></li>
  <li><a href="http://evotech.net/blog">CSS, JavaScript and XHTML explained</a></li>
</ul>

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 1: Without any CSS, this is how the code above looks

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    }

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 2: If you are using a standards compliant browser (i.e. NOT IE6 or IE7), the above should have the hrefs following the links.

A few things to note about the content rendered via the content property:

• Generated content does not alter the document tree. The content is rendered only: it doesn’t appear in the DOM tree, altering the presentation only, not the document
• To control the appearance of the generated content, you can use other CSS properties. All properties in the :after declaration impact the generated content.
• In case you were wondering, you can only add one pseudo-element per side of your element. element:before:before does not work.

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    color: #ff0000;	 font-style: italic;
    }

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 3: Here we’ve defined the color and font-style for the generated content.

While the generated content is NOT added to the DOM, think of it as an added span that inherits everything from it’s parent. The content cannot contain any HTML, just ASCII, escaped and ISO characters. As mentioned, content is used with the :before and :after pseudo-elements to generate content in a document.

Values of the CSS content property

The CSS content property can take as its value none | normal | <string> | url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style]). Values have the following meanings:

• content: none;

  none: The pseudo-element is not generated.

• content: normal;

  normal: Computes to ‘none’ for the :before and :after pseudo-elements unless the default browser rendering includes content (i.e. <q>) which is handled differently based on the browser – Safari shows the default content, IE8 and FF do not.

• content: "Estelle: ";content: "\00a3 "; /* includes '£' */

  string: Adds a string before or after the element (depending on which pseudo-element is used). Strings can either be written with double or single quotes. If your string includes a quotation mark, make sure you escape it with a slash-quote or slash-ISO value. If you are going to include any non-ASCII characters or entities, declare the charset in your CSS and XHTML, and/or use the ISO code for the character. Check out my blog post on including named entities in CSS and Javascript

• content: url(myBullet.gif);

  url: The value is a URI that designates an external resource (such as an image). If the browser can’t display the resource, FF and IE8 omit it, as if it were not specified, but Safari indicates that the resource cannot be displayed with a missing image icon.

• content: open-quote;

  open-quote and close-quote: These values are replaced by the appropriate string from the ‘quotes’ property. Opera handles this, but does not nest quotes correctly, Safari ignores this completely. IE8 and Firefox get it right.

• content: open-quote;

  no-open-quote and no-close-quote: Introduces no content, but increments (decrements) the level of nesting for quotes. Safari ignores this completely. Opera, IE8 and Firefox get it right.

• content: attr(title);

  attr(x): This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn’t have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

  For uber coolness, or geekiness as the case may be, you can add text dynamically without using javascript.

  a.tooltip {
    position: relative;
  }
  a.tooltip:hover:after {
    content: attr(title);
    position:absolute;
    display:block;
    padding: 5px;
    border: 1px solid #f00;
    background-color: #dedede;
  }

• content: counter(subtitles, decimal);content: counter(headers) "." counter(subtitles) ": ";

  
  counter(name) or counter(name, style): The counter takes two parameters: the name, which you can reference to increment or reset, and the style, which, if not declared, defaults to “decimal”. While you can name the counter almost anything except ‘none’, ‘inherit’ or ‘initial’, avoid key terms.

Browser support for the CSS content property and :before and :after pseudo elements

counter-increment and counter-reset CSS properties

Counters don’t work on their own! if you just write p:before {content: counter(subtitles, decimal);} every paragraph will have a zero in front of it. To more easily understand this, let’s think of real world examples:

• footnotes
• creating numbering for outlines: counting chapters, sections and subsections, restarting the subsection counter for each new section, and resetting the section counter for each new chapter

Using the CSS counter syntax you can define as many counters as you like in your page, increment the counters and reset the counters. While the counter gets physically added to the presentation of the page (not the DOM) using the CSS counter value on the content property as a pseudo element using the :before or :after syntax, the increment happens on an actual element on the page.

<p> With this paragraph, I have included <cite class="footnote">citation to footnote</cite>.</p>

cite.footnote {counter-increment: citations;}

cite.footnote:after {content: counter(citations); vertical-align:text-top;}

In our example above, we would increment the counter on every <cite class="footnote">, then add the footnote numbers using the content property on the :after pseudo element. In order to use a counter, you should give it a name. In the above scenario, the name is “citations”. You can also specify the style. If the style is not declared, the style defaults to decimal. The values include all the list-style-type values, though only <ol> values make sense with a counter. Values include decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian and others.

You can include more than one counter in generated content. For example, in legalese, you often have sections within sections all numbered. This is doable with CSS counters.

<h1>First Header</h1>
<h2>subsection</h2>
<p>text....</p>
<h2>another subsection</h2>
<p>text....</p>
<h2>yet another subsection</h2>
<p>more text....</p>
<h1>Another Header</h1>
<h2>subsection</h2>
<p>text....</p>
<h2>another subsection</h2>
<p>text....</p>
<h2>yet another subsection</h2>
<p>more text....</p>

To add counters in front of every h1, with counters on the h2s that reset after each h1, the CSS would look like:

h1 {
	counter-increment: headers;
	counter-reset: subsections;
	}
h1:before {
	content: counter(headers, upper-roman);
	}
h2 {
	counter-increment:subsections;
}
h2:before {
	content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";
	}

Now all <h2>s are preceded by their header number and subsection number.

A few things to note about the code: note that in the h2:before declaration we’ve included two counters: the header counter and the subsection counter. We declared the style in both calls, as style is NOT inherited. Also, we’ve included strings within our declaration. Note that there are quotes delimiting our strings, but not our counters, and there are no concatenation elements without our content value. To combine multiple counter ID’s in the same style attribute, string them together using space delimited counter ID values.

Incrementing of the counter was done through the counter-increment declaration. While the default value is to increment by 1, we can increment by other values. You can also reset counters. It makes sense to reset subsections after every header. To overwrite the default value of 1, and to reset after each <h1> the CSS could be:

h1 {
  counter-increment: headers 10;
  counter-reset: subsections 5;
}
h2 {
  counter-increment:subsections 2;
}

CSS3 adds names colors from SVG and well as colors defined by Hue, Saturation and Lighness. Below is a table that lists all named colors along with their hexidecimal, RGB and HSL values.

Also, check out the CSS3 Color Converter

Many of the property values are keywords unique to that property. But for some properties, the values can include length, frequency or time values or units. In this article we go over all the math type units that can be applied as property values in CSS.

• CSS Length Values
• Angles, Times and Frequencies:
  • CSS Angle Measurement
  • CSS Time Measurements
  • CSS Frequency Measurements

CSS Length Values

In terms of lengths, there are both relative and absolute lengths. Here is a quick summary of all of the length value types

The most common value types in CSS include pixels and percents.

Pixels can be considered both a relative and absolute. Pixels are a relative measurement because the measurement is based on the screen resolution of the monitor or screen, rather than the viewport size. However, pixels are also an absolute size because lengths given in pixels are immutable: they can only be increased via zoom features.

Images, such as jpeg photos and gifs have an absolute width and height, defined in pixels. Increasing or decreasing the size of these image types with CSS or via the width and height attributes of the image tag distort the image.

Angles, Times and Frequencies:

With some of the new CSS3, such as transforms and animations, length units do not suffice. We also need to learn and understand angles, times and frequencies. These measurements have been around and used in aural style sheets, but now with browser support for transitions, transforms and animations, angles and times have become relevant to the screen as well. The units of angles, times and frequencies are shown and described in greater detail below.

Originally, all of the above units, frequencies and times, other than the new ‘turn’ unit, were introduced as aural values. The units used for aural style sheets are angles, specified in rad (radians), deg (degrees), or grad (gradians). Frequencies are specified in Hz (Hertz) or kHz (kilohertz).

Times are specified in ms (milliseconds), or s (seconds). The default unit for all of the length, angle, time and frequency values is zero, and all the values are interpreted as floats.

CSS Angle Measurement

Angle measurement types include degrees, grads, rads and turns.

Degrees

Degrees range from 0 to 360deg, with those two being equal. Positive degrees go clockwise, negative degrees go counter clock wise. For example, -90deg is one quarter of the way around counter clock-wise, turning it on its left side. 90deg will turn it clockwise 90 degrees.
The CSS for the the image below reads (in part):

 .image1, image5 { 
                        -webkit-transform: rotate(-5deg);
                        -ms-transform: rotate(-5deg); 
                       transform: rotate(-5deg);
              }
  .image2, image4 {
                        -webkit-transform: rotate(7deg);
                        -ms-transform: rotate(7deg);
                      transform: rotate(7deg);
              }

Grads

A grad, or gradian, is equivalent to 1⁄400 of a full circle. Similar to degrees, a positive grad value will go clockwise, a negative value goes counter clockwise 100grad will be at a 90% angle. (see figure 4.4)

Rads

A rad, or radian, is equal to 180/π degrees, or about 57.3 degrees. An angle of 1 radian on a circumference of a circle creates an arc with an equal length to the radius of the circle. 1.570796326794897rad is the same value as 100grad and as 90deg.

90deg is the same as 100grad is the same as 1.508rad

Turns

Turns, are new in CSS3, and mean a rotation. One turn is equal to 360deg. For example, 2turn = 720deg. Note that turn is singular, and there is no space between the number and its unit..
rotate(900deg) is equivalent to rotate(2.5turn)

Times

Time units are much easier to explain than grads! There are two units of measurement: seconds (ms) and milliseconds (s). There are 1,000 milliseconds in a second. The format of a time value is a number followed by ‘s’ for seconds or ‘ms’ for milliseconds.
0.5s = 500ms

Frequencies

Frequency values are used with aural (or spoken) cascading style sheets. There are two value units: ‘Hz’, or Hertz and ‘kHz’ or kilohertz, 1,000Hz = 1kHz (case-insensitive). Frequencies can be used to change the pitch of a voice reading text. A low frequency is a bass sound, a high frequency is a treble. When CSS like the following snippet is used, a low-pitched voice, such

p.low { pitch: 105Hz; }
q.squeal {pitch: 135Hz;}

NOTE: Last major update: May 28, 2011

While Safari, Firefox, Chrome and Opera all support versions of border images, they only support the shorthand version of that propery. At the time of this writing, they do not support the individual properties of border-image-repeat, border-image-slice, border-image-width, border-image-source, etc. In addition, they do not all support the same property and values the same way.

Note: The properties link to the W3C specifications. The ‘details’ links point to descriptions further down the page where everything is explained in more depth.

The individual properties, values and browser support and quirks in Detail

border-color

The border-color property allows you to define the color of the border on elements upon which you are set a border. All browsers that support borders, in general, support border color. The default value is the same color as the text color, or ‘currentColor’. Even though not all browsers support the ‘currentColor’ keyterm, all browsers will render the currentColor if declared, except in IE8. IE8 will inherit the browser color instead of rendering the currentColor, which is only an issue if you are overriding a different border color that you defined with less or equal specificity in the cascade. Some browsers support multiple border colors via the border-colors property. See the next section.

Property Values for border-color

transparent | rgb(r, g, b) | #RGB (#fff) | #RRGGBB (#ffffff) |

 colorName (green) | rgba(r, g, b, a) | hsl(h, s%, l%) | 

hsla(h, s%, l%, a) | inherit | currentColor

Browser support for border-color

Browser quirks in rendering border-color

• IE6 does not understand the keyterm ‘transparent‘
• IE6 and IE7 understand RGB, but render colors when value is mixed % and number (when it shouldn’t). While IE6 and IE7 do understand rgb(), they support mixing of percent and integer values, which is against specifications, but really shouldn’t be an issue. test page
• IE6, IE7 and IE8 do not understand rgba, hsl or hsla.
• IE6, IE7 and IE8 do not understand the keyterm currentColor. They all correctly use the current color as the default if no border-color is declared, but they don’t actually understand the keyterm. IE8 ignores the call completely. IE6 and IE7 inherit.
• IE6 and IE7 do not understand ‘hidden‘ as a border-style, and inherits.
• IE6 does ok with all named colors except for silver.
• Neither IE6 nor IE7 understand named colors with the color ‘grey’. It has to be written in American English, with an A -> ‘gray’. test page

DOM

document.getElementById("myID").style.borderColor

-moz-border-(side)-colors

The border-(side)-colors properties are NOT in the w3C specifications, and only work in Mozilla. see -moz-border-top-colors

When an element has a border that is larger than 1px, each line of pixels uses the next color specified in this property, from the outside in, eliminating the need for nested boxes. Each pixel of border needs to have a specified color. If not, it defaults to the innermost color specified.

Does not work on dotted and dashed styles or collapsed table borders. At this time, each side must be declared individually.

border: 8px solid #ccc;
-moz-border-bottom-colors: #C00  #c30 #cc0 #FF0 #0C0 #00C #C0C #909;
-moz-border-top-colors:    #C00  #c30 #cc0 #FF0 #0C0 #00C #C0C #909;
-moz-border-left-colors:   #000  #666 #777 #888 #999 #aaa #bbb #000;
-moz-border-right-colors:  #000  #666 #777 #888 #999 #aaa #bbb #000;

In Firefox 1.0+, the above code snipped as grey shaded borders on the right and left, and happy pride colors on the top and bottom.

This property is not part of the w3c css specifications. And, in fact, is not needed. The same effect can be done with text-shadow or outline, except that neither text-shadow nor outline effect the box model. The other option is border image with a gradient.

Browser support for the non-standard border colors properties

border-style

The border-style property allows you to define the style of the border on elements upon which you set a border. All browsers support the border-style property, but some browsers don’t understand and / or misrender some of the values. The default value is ‘none’.

Property Values for border-style

dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid

Browser support for border-style

Browser quirks in rendering border-style

• The Webkit browsers ignore color when rendering the groove, inset, outset and ridge values. The spec is a little ambivalent about whether this is correct or not, but since all other browser engines don’t ignore border color, and it makes no sense to me that color is ignored, webkit fails!
• IE6 and IE7 do not understand ‘hidden’, and inherits.
• Note the inset and outset are supposed to be rendered as ridge and groove if border is set to collapse. I did not test these!

TIP:

if you need to use Groove, Inset, Outset or Ridge, realize that these border types will appear different depending on the browser. Opt for declaring different colors for different borders to create the same effect instead.

DOM

document.getElementById("myID").style.borderStyle

border-width

The border-width property allows you to define the width of the border on elements upon which you set a border. All browsers that support borders support border-width. The default value is ‘medium’, which is about 3px wide. You can use the key terms thin, medium or thick, or any of the CSS lengths: em, px, etc.

Property Values for border-width

thin | medium | thick | lenght (% | em | px | ex | mm ...)

Browser support for border-width

Browser quirks in rendering border-width

• While all browsers support all the values, IE6 and IE7 get the box model wrong. Otherwise, they do get the values correct.

TIP:

Need to create a triangle? You can create a triangle by using borders. To create the grey triangle you see below you can use the following code:

div::after {
	content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 10px solid #FF0000;
    }

DOM

document.getElementById("myID").style.borderWidth

border

The border shorthand property is shorthand for both

border-width
border-color
border-style 

and

border-top:
border-right:
border-bottom:
border-left:

The border property allows you to define the width, color and style of the border of all four sides of your element in one simple declaration. All browsers that support borders support the border shorthand property, with the caveats of the three individual properties expanded upon above.

The order of the three values does not matter. The only required value is the style. The other two are optional.

Property Values for border

 border-style && border-width && border-color

Browser support for border

Browser quirks in rendering border

• The only required property is the style of the border. However, if color and width are not declared, they should default to the default value of medium width and currentColor. IE6 and IE7 inherit from less specific declarations instead of resetting. That might not make sense, so let me expalin:

  .mySelector{
        border: 1px solid #FF0000;
        border: dotted;
    }

  The above should render a border as if it was written

  border: medium dotted currentColor /* expected appearance */

  but instead, in IE6 and IE7 only, renders as

  border: 1px dotted #FF0000; /* IE6 and IE7 rendering values *

DOM

document.getElementById("myID").style.border

border-collapse

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML. Supported in all browsers, the value of collapse collapses table borders into a single border when possible, ignoring border-spacing and empty-cells properties. The value of separate, which is the default, leads to detached table borders, where border-spacing and empty-cells properties are headed. If there is spacing, there will be white space between the borders of adjacent table cells. When set to inherit, the value of the border-collapse property is supposed to be inherited from the declaration on the parent element.

Note that at the time of this writing, border-collapse is not listed in the CSS3 documentation. It *IS* part of CSS3 as well, it just hasn’t changed since CSS2.1, so including it into the specifications is considered low priority.

Property Values for border-collapse

collapse | separate | inherit

Browser support for border-collapse

Browser quirks in rendering border-collapse

• IE6 and IE7 doesn’t understand inherit: instead of inheriting from the parent, it inherits from less specific values set for the property in the cascade if any are present. If no value has been declared with less specificity, defaults to separate.

• If set to collapse, the inset and outset border-styles are supposed to be rendered as ridge and groove respectively.

DOM

document.getElementById("myID").style.borderCollapse

border-spacing

The border-spacing only has any effect if the border-collapse property is NOT set to collapse. The border-spacing property sets the distance between the borders of adjacent cells — which is why border-collapse: separate is a default prerequisit. Supported in all browsers.

Note that at the time of this writing, border-spacing is not listed in the CSS3 documentation. It IS part of CSS3 as well, it just hasn’t changed since CSS2.1, so including it into the specifications is considered low priority.

Property Values for border-spacing

length (px, em, %, etc) | inherit

Browser support for border-spacing

Browser quirks in rendering border-spacing

• IE6 and IE7 doesn’t understand border-spacing.

DOM

document.getElementById("myID").style.borderSpacing

Finally! We finally get to CSS3 Properties. w00t!

border-radius

The border-radius property is actually shorthand for border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius in that order. But, save bytes, and confusion, by using the shorthand.

For rounded corners (versus elliptical), declare between one to four values. For elliptical corners, when using the shorthand, separate the vertical radius declarations from the horizontal radius with a slash.

Add "-moz-" in front of the property name for Firefox 3.6 and earlier (and -webkit for safari 4 and earlier). All other browsers that support border-radius now do so without a prefix.

Percentage values: The CSS3 spec states that percentages refer to corresponding dimension of the border box. Percentages for the horizontal radius refer to the width of the box and percentages for the vertical radius refer to the height of the box.

Safari 5 doesn’t understand percentage as a length for border radius. This is fixed in the nightly builds. But, it means if you include a % value, the entire declaration will be ignored. Opera does something really funky. It understands % lengths, but handles it really odd: seemingly relative to the window or the worlds largest monitor when floated: i can’t tell. Not floated, it’s still a little off

Property Values for border-radius

length{1,4} |  length{1,4}/length{1,4}

Browser support for border-radius

Browser quirks in rendering border-radius

• IE6, IE7 and IE8 don’t understand any version of border-radius, and never will.

• Safari 5 does NOT understand percentages for radii values. This has been fixed in the webkit nightlies, and should be resolved in Safari 6
• Opera get’s the curve slightly wrong, and completely off when floated.

/* Long hand way */
   border-top-left-radius: 15px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 20px;

/* Longhand elliptical */
   border-top-left-radius: 15px 5px ;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 5px 15px;
   border-bottom-left-radius: 20px;

/* shorthand values */
  -moz-border-radius: 15px 10px 5px 20px; /* for FF3.6 */
       border-radius: 15px 10px 5px 20px;

/* shorthand values */
  -moz-border-radius: 15px 10px 5px 20px / 5px 10px 15px 20px; /* for FF3.6 */
       border-radius: 15px 10px 5px 20px / 5px 10px 15px 20px;
  

There’s a border radius generator that only handles one value per corner

Elliptical (versus Rounded) Corners.

When using shorthand for elliptical corners, separate the vertical from the horizontal radii with a slash. When using shorthand, no slash is used.

-moz-border-radius: 10px / 40px;  
border-radius: 10px / 40px;

When declaring different radii for different corners, the order of the corners is topleft, topright, bottomright, bottomleft, when 4 values are given. Similar to TRBL of borders, if you only declare two values, then the first is for topleft/bottomright, and the second value is for topright/bottomleft. But webkit only understands 1 value for shorthand. Safari/WebKit doesn’t support the slash (/) notation. If two values are specified, an elliptical border is drawn on all 4 cornersIn this example, where as Moz and Opera correction create an odd shape with evenly rounded corners (see the image if you’re not in a browser that renders correctly), in webkit browsers all four corners will be the same.

-moz-border-radius: 15px 30px; 
border-radius: 15px 30px; 

The syntax for creating a single elliptical corner is the same for all browsers: no slash. Also note that the syntax for Mozilla 3.6 and earlier differed from the rest.

-moz-border-radius-topleft: 15px 30px; 
border-top-left-radius: 15px 30px;

Webkit does not understand percentages as border radius values.
Firefox 3.6 understands %, but uses percent of width to make rounded corners instead of proportional percentages (based on width *AND* height).
Opera can be screwy.

-moz-border-radius: 10%; 
border-radius: 10%;

DOM

document.getElementById("myID").style.borderTopLeftRadius

document.getElementById("myID").style.borderTopRightRadius

document.getElementById("myID").style.borderBottomRightRadius

document.getElementById("myID").style.borderBottomLeftRadius

box-decoration-break

The border-decoration-break property determines how the border appears should there be a break in content flow on an element that has a border applied. Breaks include a box that has a border broken by a page break (print), column break (using the CSS3 column properites), or, for inline elements, at a line break. This property determines if a border should be inserted on both sides of the break (before and after), or the break should not open and close the border, in effect, leaving it open. The value ‘clone’ will add border-style and/or border-image with padding if there is a break, as if it was the normal end of the box, creating mini-boxes. The value ‘slice’ will not add padding or border at the break, basically slicing the border as you would a cake.

The box-decoration-break property specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding. For backgrounds it defines how the background positioning area is derived from these multiple boxes and how the element’s background is drawn within them. The default is slice.

Property Values for box-decoration-break

clone | slice

Browser support for box-decoration-break

Opera is the first browser to support box-decoration-break value of ‘clone’ The reason the ‘slice’ value is listed as working in the grid is because slice is the default. So, even without understanding ‘box-decoration-break’ or ‘slice’, that is what happens by default.

box-shadow

The box-shadow property enables you to add drop shadows or inset shadows on elements. One or more box-shadows can be attached to a box, by which you can create some pretty cool effects. Shadows are drawn just outside the border, or just inside in the case of inset. In terms of the box-model, shadows are similar to ‘outline’, and do not influence the layout: they may overlap with other boxes.

Property Values for box-shadow

none | inset || [ length(left) length(top) length(blur) ? length(spread) ? || color ]{1,n}

What the box-shadow property values mean

box-shadow: 3px 3px 3px 3px rgba(0,0,0, 0.4);

The first length value is the left offset of the shadow. A negative value will put the shadow on the left, positive to the right.

The second length value is the top offset. A negative value will put the shadow above the bo, a positive value will place the shadow below the box.

The third length value is a blur radius. Negative values are not allowed. If it is 0, the shadow is solid. The larger the value, blurrier the shadow will be.

The fourth length value is the spread.

The last value is the color. Always include the color. The default value of the color (the value of color if the color is omitted) is still being debated. While to me it makes sense that the default value should be currentColor, the working group is currently considering a black shadow. I strongly disagree. I *HIGHLY* recommend using RGBA if your blur radius is greater than 0, as the effect is much prettier if you start from a slightly transparent version of your color, especially if you are using black, than if you start with an opaque version of grey or other color..

box-shadow:       2px  -5px  4px 1px rgba(255, 255, 48, 0.5),
                  5px -10px  6px 3px rgba(255, 224, 48, 0.5),
                  7px -15px 11px 5px rgba(240, 128,  0, 0.4),
                  12px -25px 18px 7px rgba(200,   0,  0, 0.3),
                  inset 2px  -2px  5px     rgba(255, 255,  0, 0.5),
                  inset 5px  -5px 25px 5px rgba(255,   0,  0, 0.8);

In this meteor example, (it’s in an iframe due to WordPress liking to eat my code) the fourth value is the spread radius: the shadow grows in all directions by the radius value given. Negative values shrink the shadow. This is a multiple box shadow example, that works well in Firefox and Opera. Webkit should get it working soon, but they aren’t there yet:

The ‘inset’ keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it) . I generally use inset for shadows on textareas and other user input element.

Browser support for box-shadow

Browser quirks in rendering box-shadow

• IE6 and IE7 doesn’t understand box-shadow, and never will.

• Mozilla 3.6 and Safari require browser specific prefixes
• Webkit can die on inset shadows. Yes, it understands inset shadows, but it uses a lot of CPU and can freeze up your browser. This issue is resolved in webkit nightly, so should be good in Safari 6

DOM

document.getElementById("myID").style.boxShadow

Border-Image Properties & Values

At first the idea of ‘border-image’ scared the crap out of me. Were people going to start putting images around all their elements and start creating layouts reminiscent of the hideiousness that was the 1996 web? Then i realized the utitlity of border images in creating buttons. Then it occurred to me that with background linear gradients, there was no need for border-images. However, border images are better supported than linear gradients, and I haven’t written about linear gradients yet (coming, soon hopefully). So, let’s dive in!

Unlike all the other shorthand properties, where I first explain the components and then explain the shorthand, for the new to CSS3 Border-Image properties we’re going to start with the short hand, since the shorthand is fairly well supported outside of the IEs, but the individual properties… not supported at all.

border-image

Unlike the individual properties of other shorthand properties, browsers that support the shorthand property are not yet supporting the properties that make up the shorthand as individual properties. Do, however, read up on the individual properties so that you may better understand how to write the short hand property.

Note that if an element has both a border-image and a border declared, the border-image property supercedes the regular border declaration.

‘none’ is a value for border-image-source, not the border-image shorthand, in the specifications. Using ‘none’ as the value, will mean that no background image will be rendered as, by default, all the values (source, slice, width, outset and repeat) that are not explicitly set in the shorthand border-image call are set to their individual defaults, and we’re setting source to its default of ‘none’. I am including ‘none’ in the support table just in case you read no further.

The border image property is both short for:

border-top-image:
border-right-image:
border-bottom-image:
border-left-image:
border-corner-image:
border-top-left-image:
border-top-right-image:
border-bottom-left-image:
border-bottom-right-image:

and short for

border-image-source: 
border-image-slice: 
border-image-width: 
border-image-outset:
border-image-repeat:

The border-image is defined by ‘border-image-source’. The image is sliced into 9 sections with the ‘border-image-slice’ values. Those 9 section are then scaled, positioned, and tiled into their corresponding border image regions in four steps by :

Value of border-image

border-image-source || border-image-slice {1,4} [ / 'border-image-width'? [ / 'border-image-outset' ]? ]? || 'border-image-repeat' 

Syntax of border-image shorthand

border-image: url() slice{1,4} /width_px{1,4} repeat{1,2}
-moz-border-image: url(../wp-content/themes/green/i/button.gif) 5 / 5px stretch;
-webkit-border-image: url(../wp-content/themes/green/i/button.gif) 5 / 5px stretch

Browser support for border-image

Browser quirks in rendering border-image

• IE6, IE7, IE8 and IE9 do not support border image and never will
• Mozilla and webkit browsers require the -moz- and -webkit- prefixes respectively.
• While Mozilla, Webkit and Opera support the shorthand border-image property, they do not support the individual property declarations that make up the shorthand.
• Opera is finicky: while omitted values should be at their default value, if you omit a value in Opera, the entire declaration fails.

border-image-source

Similar to background-image property, the value of the border-image-source is the relative or absolute path to the image file on the server, or none. No browser supports this stand alone value. If you want to override the border background image on an element, you have to use the shorthand border-image property, and redeclare all values in the shorthand. Note that unlike the CSS3 background-image property, there can only be one background image declared for an elements border. If both

Property Values for border-image-source

url(imagesource) | none

Browser support for border-image-source

Browser quirks in rendering border-image-source

• No browsers support this property as a standalone.
• As part of the shorthand, it is supported in all non-IE browsers.
• User the -webkit- prefix for Safari and Chrome. Use the -moz- prefix for Mozilla. No prefix is required for Opera.

border-image-slice

The ‘border-image-slice’ property values represent inward offsets from the top, right, bottom, and left (TRouBLe) edges respectively of the image. In effect, the browser divides the one border image and the elements border into nine regions: four corners, four edges and a middle.

Use the border-image-slice properties to define what parts of your image are going to be in the corners, and what parts make up the rest.

The border image can also be used as the background image: use the ‘fill’ keyword to do this. Without the ‘fill’, the center part of the image part will be made as transparent. If fill is used, the border-image sits on-top of the background image, in effect hiding it if there are no transparent pixels. No browser supports the fill keyterm, but all seem to do it by default. The default value is 100%.

Property Values for border-image-slice

length{1,4} && fill

Browser Support for border-image-slice

Do not declare ‘fill’ as it will kill the rest of the rendering. However, it seems to be the default, so it ‘works’, it just doesn’t work.

border-image-width

The border-image-width is the width of the border in terms of the box model. The element has the width and height as determined by the content and CSS declarations. Adding any value other than 0 (or the 1 default) increases the height and width of the element by the value declared. If percentages are used, the percentage is relative to the image width and height, not the element’s width and height. The default is 1. I have not tested all value types, just the general property as part of the shorthand.

Note that if you do not declare a border-image-width, but do declare a regular border-width, the CSS2.1 border-width will be inherited.

Property Values for border-image-width

length{1,4} | auto

Browser support for border-image-width

Browser quirks in rendering border-image-width

• Like the other longhand border-image properties, there is no browser support for the individual border-image-width property.
• Opera does not support the border-image-width property even as part of the shorthand. Makes the whole declaration fail.
• No browser supports the value of ‘auto’. including ‘auto’ makes the entire declaration fail.

border-image-outset

The values of the border-image-outset property specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. Numbers represent multiples of the corresponding border-width. I have no clue how this is supposed to actually render, but it is not supported anywhere. If included, the entire declaration fails. The default is 0.

Property Values for border-image-outset

length{1,4}

Browser support for border-image-outset

border-image-repeat

By default, the border image is repeated. There is NO way to not fill up the element with the border image. What we have is different options on how to fill up the area. . The ‘stretch’ value will not tile the image, but rather stretch it to fill the area provided. Stretch is the default. The ‘repeat’ value will tile the image to fill the area. This is to fill the area BETWEEN the corners. The ’round’ value is similar to repeat, but if it does not fill the area with a whole number of tiles, the image will be stretched so that it does. When using either of these values, make sure that your slicing width cuts your tile so that it retiles nicely.
The ‘space’ value doesn’t seem to be supported. Similar to repeat, except
if the repeated image does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Property Values for border-image-repeat

stretch | repeat | round | space

Browser support for border-image-repeat

Notes

• While webkit doesn’t fail on the round property, it uses ‘repeat’ instead

Everything you could possibly want to know about CSS Background Properties: Interpreting the w3c specifications with browser support and links to examples and test cases.

Last Major Update: May 26, 2011

140+ named colors

multiple 

4 Values

background-attachment: fixed | scroll  | local;

document.getElementById("myID").style.backgroundAttachment

background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456 | magenta;

background-image: inherit | none | url(relative to CSS) | [gradients];
background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

background-image: 
 url("data:image/svg+xml;utf8,
   <svg xmlns='http://www.w3.org/2000/svg'>
   <linearGradient id='gradient'>
   <stop offset='1%' stop-color='#F00'/>
   <stop offset='90%' stop-color='#C33'/>
   </linearGradient>
   <rect fill='url(#gradient)' x='0' y='0' 
   		width='100%' height='100%'/>
   </svg>"); }

document.getElementById("myID").style.backgroundImage

background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;
background-position: 0 0, 50% 50%, 100% 100%; /* multiple placements */

background-position: [bottom | center  | left | right ][length][bottom | center  | left | right ][length];
background-position: bottom 40px right 20px;

document.getElementById("myID").style.backgroundPosition

background-position-x: center | inherit | left | right | px/em | %;

document.getElementById("myID").style.backgroundPositionX

background-position: bottom | center | inherit | top | 10px | 2em | 50%;

document.getElementById("myID").style.backgroundPositionY

background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

document.getElementById("myID").style.backgroundRepeat

background-clip: [border-box | padding-box ] [ , [border-box | padding-box ] ]* ;
-moz-background-clip: border;
-webkit-background-clip: border-box;

document.getElementById("myID").style.backgroundClip

background-origin: [border-box | padding-box | content-box ] [ , [border-box | padding-box  | content-box] ]* ;
-moz-background-origin: border; /* does not yet support multiple images, so no support for multiple values */
-webkit-background-origin: border-box, padding-box, border-box;

document.getElementById("myID").style.backgroundOrigin

document.getElementById("myID").style.backgroundSize

	background-color: transparent;
	background-position: 0% 0%;
	background-size: auto auto;
	background-repeat: repeat repeat;
	background-clip: border-box;
	background-origin: padding-box;
	background-attachment: scroll;
	background-image: none

background: background-image | background-position / background-size | background-repeat  | background-attachment | backgroun-origin | background-clip | background-color 
background: url(myImg.jpg) bottom 20px right 20px / 200px 100px no-repeat fixed red;
background: url(myImg.gif) 0 0 /  200px 100px no-repeat fixed border-box padding-box blue;  /*in action*/

document.getElementById("myID").style.background

In my CSS Summit session we’ll use some CSS3 features learned in earlier sessions to create a native looking iPhone web app. We’ll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don’t have to wait any longer to use CSS3! Join Us!

Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

• iPhone Support for CSS3 Selectors
• iPhone Support for CSS3 properties
• iPhone & Safari Support for HTML elements, including HTML5
• HTML attributes for the iPhone and Safari
• Safari and iPhone Event Handlers
• Other iPhone and Safari Resources

iPhone Support for CSS3 Selectors

All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

• *
• E
• .class
• #id
• E F
• E > F
• E + F
• E[attribute]
• E[attribute=value]
• E[attribute~=value]
• E[attribute|=value]
• :first-child
• :link
• :visited
• :lang()
• :before
• ::before
• :after
• ::after
• :first-letter
• ::first-letter
• :first-line
• ::first-line
• E[attribute^=value]
• E[attribute$=value]
• E[attribute*=value]
• E ~ F
• :root
• :last-child
• :only-child
• :nth-child()
• :nth-last-child()
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type()
• :nth-last-of-type()
• :empty
• :not()
• :target
• :enabled
• :disabled
• :checked
• see them all

iPhone Support for CSS3 properties

Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

Some CSS3 including the following, which will be discussed in future blog posts.

• hsl(), rgba(), hsla() color support
• native rounded corners (-webkit-border-radius)
• IE box model (-webkit-box-sizing)
• Shadows on text (text-shadow was in CSS2.0)
• Shadows on elements (-webkit-box-shadow)
• multiple background images
• opacity /gradient transparency
• @font-face web fonts
• CSS Animation
• Media Queries
• namespaces

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

Safari and iPhone Event Handlers:

Other iPhone posts in my blog

• iPhone Screen Orientation: portrait and landscape
• :hover pseudoclass for the iphone
• Web Development for the iPhone
• Safari 3.0 filter/hack

IE8 CSS Support and Rendering Mode, IE8 debugging, etc.

• IE8 and CSS
• IE8 compliance mode / preventing IE7 rendering in the IE8 browser
• IE8 bugs
  
• Differences between IE7 compatibility mode and IE8
• IE8 CSS Hack
• IE8 Developer Toolbar (or Firebug for IE8)

IE8 and CSS

IE8 came out today. I appended the CSS selector browser support blog post to include IE8 CSS Selector support and IE7 compliance mode CSS Selector support. Most notable is that IE8 Supports all of CSS2.1 and passes the Acid 2 test.

IE8 compliance mode / preventing IE7 rendering in the IE8 browser

Important to know is that IE8 has a button that allows users to render your page in IE7. If that button is clicked enough, your page will always render in IE7 for everyone (not just those who clicked the button). So, do you have to test your pages in IE8 in IE7 mode? No, you don’t. To ensure that your page is not rendered in IE7 mode inside the IE8 browser add the following meta tag to your pages:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Alternatively, if you want your pages to render in IE7 mode you can write: <meta http-equiv="X-UA-Compatible" content="IE=7" />. The issue with this is that IE7 rendering in IE8 is not identical to plain IE7. So, I recommend against using this meta tag.

So, to ensure that you DON’T have to test in IE7, IE8 and IE8 in IE7 mode, add the code above.

To learn more about what IE8 supports, check out IE8 CSS Selector support.

IE8 bugs

IE8 JavaScript Bug: Apparently IE8 doesn’t much care for prototype and prototip. I think it’s an issue with className that causes IE8 to choke. In the meantime, if you are using Ruby on Rails, then you’re probably using prototype.js. And, if you’re using prototype.js, then IE8 chokes, so you have to use the meta tag. And, if you use the
<meta http-equiv="X-UA-Compatible" content="IE=7" /> tag, make sure it’s the FIRST thing on your page, because IE8 suck ass, just like IE7 and IE6.

If you’re more of an ASP.net fan (which I am NOT!), there is another issue with menus not showing. Mark Hidreth explains it in his blog., but in short, the solution is to add a z-index of greater than zero to <asp:Menu>. Thanks to Attiq Jafar for alerting me to this bug and solution.

IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

Differences between IE7 compatibility mode and IE8

These are just a few differences that I have found so far. Please do NOT consider this an exhaustive list

1. default padding on <p> is not equal
2. table { border-collapse: collapse;} is NOT rendered the same. If dashed, IE8 is properly dotted or dashed, whereas IE7 overlays the lines and it looks ugly, and otherwise does not collapse
3. border bottoms on an inline element will not display in IE7 if the border is the lowest part of the page. The page will not grow to include the border, unless the bordered element is block. IE8 will grow.
4. border: hidden; IE7 does NOT understand the value of hidden for the border property.
5. border-style: outset The coloring is different for IE7 than IE8. IE7 is darker on the bottom/right. IE8 has the darker color on the top/left. Groove and
6. RGB – IE7 displays RGB mixed number types: The spec states that values for RGB should be three integers or three percentages, but not a combo of the two. (IE7 and IE6 display mixed types. IE8 and standards compliant browsers dow not render colors with mixed value types.
7. IE8 has support for content:, counter-increment: and counter-reset: IE7 doesn’t!
8. Empty declarations overide in IE7, but not 8: IE7 will not show a property if there is a malformed declaration after the element. p { color:green; color: } – IE8 will show green. IE7 wont.
9. Identifiers starting with a digit or non-letter character followed by a digit: Identifiers starting with dash-number choke IE7: If there is a series of classes or ids listed, including ones that start with a dash followed my an integer, IE7 will choke, and ignore all the selectors in the series. For example,

   .-3myClass, .blue {color: blue;}
   #-3myClass, .blue {color: blue;}
   .3myClass, .blue {color: blue;}
   #3myClass, .blue {color: blue;}

   The element with a class of blue will NOT inherit the blue from either of these declarations

10. @import is not correctly supported in IE7: @import “support/import-coloroveride.css”; (see the one before it for comparison)
11. border-width: thin appears to be 1px wide in IE8 and 2px wide in IE7
12. clearing: if you clear an element in IE7 after a floated element, and the element has a margin top, that will be the space between it and the floated element. In IE8, the margin top will be the space between it and the last non-floated element.
13. box model: Some people believe that IE got the box model right, and the w3c got the box model wrong. IE8 gets the box model right according to the w3c.

IE8 CSS Hack

This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

 p.myclass {    
     color: green;    
     *color: red; 
}  
body:last-child p.myclass {
     color: blue; 
} 

IE8 Developer Toolbar (or Firebug for IE8)

IE8 comes with a developer toolbar. The developer toolbar is definitely more robust than what came with IE7. Similar to Firebug, you highlight an element, and can edit CSS on the fly, but the mechanism is less robust. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property, and you can indeed edit the value or property by clicking on the value or property. You can’t use the up/down arrows like in Firebug, and unlike Firebug, the change isn’t instant: you have to click out of the property to see the change. However, it is definitely an improvement on the previous dev toolbar.

I should probably write a tutorial on this developer toolbar, but I really don’t care enough about this browser to put the effort in to it…. but maybe.