Eric Meyer: The State of CSS In an IE7 World

They fixed fixed positioning!

Children of Elements

• body > div {border: 1px solid #fff;
  
• body > div > div {border: 1px solid #000;
• div > ul > li (top level of links)

First Children

• #ericmeyer > *:first-child { cuteness: 110%;} (his first child)
• #ericmeyer:first-child { pedantics: xx-large;} (any first child)
• td:first-child {background: yellow;} (any first child as a td)

Attribute Selectors

• [attr] [href]
  
• [attr="val"] [href="http://w3.org"]
  
• [attr="val"] [class="example"]
• [attr="val"] [lang|="en"]
• css3 accepts attr* for "any"
• instead of classing
  
• Styling forms: input[type="text"] {width: 85%; border: 1px solid #000;} input[value="required"] {color: red; font-weight: bold;}
• Visual Link Typing: LINK: a{href=".pdf"] {padding-right: 18px; background:url(/pix/pdf_icon.gif");} TITLE: a[title*="(PDF") {padding-right: 18px; background:url(/pix/pdf_icon.gif");} Every .pdf link or title will have PDF icon.
• Secure Link Styling: a{href="http"] {padding-right: 18px; background:url(/pix/lock_icon.gif");} Every HTTPS link will have a "lock" icon.
  
• Use if not vital to site.
• Selecting Table Cells: th[scope="col"] {border-top: 1px solid #000;} th[scope="row"] {border-right: 1px solid #000;}
• Highlighting images by type: img[img=".jpeg"]{border: 1px solid #fff}
• Sample diagnostics: Expose bugs/problems. div [id] { border: 1px dotted red;} img {border: 5px solid red;} img[alt] {border-style: none !important;}
• What about IE6? Dean Edwards' IE7 script: IE7 { css2: auto } connects to .js

What the hack?

• Import ie6 stylesheet:
• Enhancing IE6 with the IE7 script brings it nicely up to date.
• Hacking will still be necessary.
  

positioniseverything.net