126 Studios Blog

Well as of this past week, I decided to upgrade 126 Studios with some new CSS 3.0 attributes.  The application of these elements has been a winding road, because browser support is still a little lackluster.  So today I’m going to talk about CSS 3.0 and what it’s going to do for the WWW!

• Rounded Corners [Declaration: Border-Radius]
  • This is the only attribute that I have added so far to the site.  It gives a nice rounded touch to the borders on the site.  It’s easier to use the CSS 3.0 model than to use JavaScript and/or CSS to complete the mission.  I really can’t wait to see where this will go, because I absolutely love this declaration.  It will open so many doors to web development.
  • So where do the roads begin to wind?  Well when CSS 3.0 is not a standard-different browsers handle the code differently, and I have to implement “browser -specific” hacks to complete the mission till support is 100%.
    • The General “border radius code”

      • border-radius: 10px

    • The Mozilla border radius hack

      • -moz-border-radius: 10px

    • The WebKit-Safari/Chrome, Ect

      • -webkit-border-radius: 10px

  • Now say I want to only curve a specific corner, well that makes things even more difficult.  Each browser hack varies slightly from the original.
    • Original CSS 3 Property

      • border-[top/bottom]-[left/right]-radius: 10px;

    • Mozilla

      • moz-border-radius-[top/bottom][left/right]: 10px;

    • Web Kit

      • -webkit-border-[top/bottom]-[left/right]-radius: 10px;

  • If you have noticed that Internet Explorer has not come up yet, well IT HAS NO CSS 3.0 SUPPORT YET!  Come on Microsoft, We Want CSS 3.0!
• CSS 3.0 Tests [CSS 3.0.Info]
  • CSS3 Selectors Test [Test Here]
    • Internet Explorer [8.06...]
      • 22/43 Selectors Passed
      • 349/578 Tests Passed
    • Firefox [3.1 Beta 2]
      • 41/43 Selectors Passed
      • 576/578 Tests Passed
      • Failed on :link and :visted
    • Safari [3.2.1]
      • 100% Passed
    • Opera [9.6.3]
      • 100% Passed
    • Chrome [1.0.154]
      • 100% Passed
  • Of course, that is only for modules, specific declarations-such as border-radius are not supported in all browsers.  The above test is not a complete test to prove support.  Currently, CSS3.Info shows that Firefox/Safari are well implemented with the newest functions-of course that is changing with the latest builds!

For more information on CSS3, please visit the W3C CSS Site

This entry was posted on Thursday, February 12th, 2009 at 11:34 PM and is filed under Designing, Inside Look.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.