The Future of CSS Browser Support
In my last article I wrote about how to control IE and really take advantage of css.
The web is looking brighter ahead. With the departure of ie6 (eventually), the introduction of advanced css techniques with css3, and full support for transparent pngs, web design will be even more exciting than it has ever been. With a lot of limitations gone, perhaps it will become a ever-more-popular field of study for the next generation of designers.
Welcoming IE8
Enough headaches. IE6 will thankfully be something we will no long have to worry about. With IE6 finally gone we can finally do some cool things with png’s, not to mention make development time for css much more smoother.
Browsers are starting to support CSS3.
Multiple background images for one element
.box {background-image: url("top-left.gif"), url("top-right.gif"), url("bottom-left.gif"), url"(bottom-right.gif");background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;background-position: top left, top right, bottom left, bottom right;}
Source: 24 ways
Media Querie
This Media Query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:”
@media screen and (min-width: 400px) and (max-width: 700px) {property:value;}
This Media Query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
@media handheld and (min-width: 20em) {property:value;}
Source: wc3
Sibling Selectors
Sibling Selectors will make it easy to style elements without having to add so much markup. Extra divs would not no longer necessary.
Child Selector (CSS2)
Matches all li’s that are immediate children of the ul.
ul>li {
property:value;
}
Adjacent Sibling Selector(CSS2)
This example targets the p when h2 is an adjacent sibling.
-
h2+p {
property:value;
}
General Sibling Selector (CSS3)
This example will match a p element if it’s a sibling of an h2 element
h2~p {
⋮ property:value;
}
Pseudo Elements
Some of these are really cool, it’s more posssible to target almost any element without using classes or wrappers.
-
:first-letter
represents the first character of the first line of text within an element
:first-line
represents the first formatted line of text
:before
specifies content to be inserted before another element
:after
specifies content to be inserted after another element
::selection
represents a part of the document that’s been highlighted by the user
Psuedo Classes
-
:nth-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-last-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:nth-last-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:last-child
matches an element that’s the last child element of its parent element
:first-of-type
matches the first child element of the specified element type
:last-of-type
matches the last child element of the specified element type
:only-child
matches an element if it’s the only child element of its parent
:only-of-type
matches an element that’s the only child element of its type
:root
matches the element that’s the root element of the document
:empty
matches elements that have no children
:target
matches an element that’s the target of a fragment identifier in the document’s URI
:enabled
matches user interface elements that are enabled
:disabled
matches user interface elements that are disabled
:checked
matches elements like checkboxes or radio buttons that are checked
:not(S)
matches elements that aren’t matched by the specified selector
Source: Sitepoint
What will be expected of CSS Coders?
With alpha transparent pngs in full support and ie6 gone, slicing the old way will almost be a thing of the past. Why slice an image with a background color behind it? It won’t seem practical anymore becuase that image can be placed behind any background now. CSS is evolving and becoming more complex with what it can achieve. Its more than simple ways to describe what color you want. At this rate it looks like a lot more will be required of the new css coder.