Css3 - Html5 http://css3c.com Fri, 13 Apr 2012 04:18:25 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 HTML5: The Basics http://css3c.com/html5-2/html5-the-basics/ http://css3c.com/html5-2/html5-the-basics/#comments Fri, 13 Apr 2012 04:17:35 +0000 admin http://css3c.com/?p=257 The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:

1. New Elements
2. Semantic Changes
3. Getting it Working Today

This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.

APIs

Before we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. HTML5 includes several new APIs that are integrated with some of the new HTML5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:

  • 2D drawing API which can be used with the new canvas element.
  • API for playing of video and audio which can be used with the new video and audio elements.
  • An API that enables offline Web applications.
  • An API that allows a Web application to register itself for certain protocols or media types.
  • Editing API in combination with a new global contenteditable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Cross-document messaging.

    • As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.

    New Elements in HTML5

    HTML5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brief descriptions (source: w3schools):

  • <article> Defines external content
  • <aside> Defines some content aside from the article it is placed in
  • <audio> Defines sound, such as music or other audio streams
  • <canvas> Defines graphic, such as graphs or other images
  • <command> Defines a command button, like a radiobutton, a checkbox, or a button
  • <datagrid> Defines a list of selectable data. The datagrid is displayed as a tree-list
  • <datalist> Defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value
  • <datatemplate> Defines a container for data template. This element must have child elements to define a template: <rule> elements
  • <details> Defines details of an element, which the user can see, and click to hide
  • <dialog> Defines a dialog, such as a conversation
  • <embed> Defines embedded content, such as a plug-in
  • <event-source> Defines a source for events sent by a server
  • <figure> Used to group some elements
  • <footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information
  • <header> Defines the header of a section or document
  • <mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text
  • <meter> Defines a measurement. Used only for measurements with a known minimum and maximum value
  • <nav> Defines a section of  navigation links
  • <nest> Defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule>
  • <output> Defines different types of output, such as output written by a script
  • <progress> Defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript
  • <rule> Defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest>
  • <section> Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document
  • <source> Defines media resources for media elements, such as <video> and <audio>
  • <time> Defines a time or a date, or both
  • <video> Defines video, such as a movie clip or other video streams

    • Though we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as <canvas> and <video>.

    Semantic Changes

    This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:

    1. <nav>
    2. <section>
    3. <article>
    4. <header>
    5. <footer>
    6. <aside>

    Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you’ll simply have “<header>.” Notice I included “div class” instead of “div id.” This is because these elements are repeatable throughout a page in the same way that classes are. We’ll investigate this more later this week in article three.

    Getting HTML5 Working Today

    Don’t get too excited by this headline. As any good web developer knows, all the major web browsers still differ (some are worse than others, you know who I’m talking about) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Though mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t meant that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with HTML5 right away. In article four, we’ll take a look at how you can start your HTML5 journey sooner rather than later.

    Conclusion

    This article briefly introduced the new elements and APIs included in HTML5. We talked about how you should be excited for the changes HTML5 will bring to the web apps of tomorrow. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today. Check back here frequently in the next week for an in-depth look into each of these topics!

    ]]>     http://css3c.com/html5-2/html5-the-basics/feed/ 0     How to Alternate Floated Images with CSS 3 http://css3c.com/css3/how-to-alternate-floated-images-with-css-3/ http://css3c.com/css3/how-to-alternate-floated-images-with-css-3/#comments Sat, 17 Sep 2011 22:33:04 +0000 admin http://css3c.com/?p=252 If you put up a lot of images on your web pages, you may want to alternate how they are displayed within the content. With CSS 2 and below, you have to set a different class on every image. Then you add the float:left or float:right to each class. If you add a new image to the page and you want it to alternate with the rest, you’ll need to add a class to it and then change the class of all the images below it.

    CSS 3 makes this easy. With just two CSS styles you can set all the images on your page to float alternately left and right. You just need to use the nth-of-type CSS pseudo-class.
    Write Your HTML

    First write your HTML with the images in the content where you want them.

    Example:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <img src="http://css3c.com/wp-content/themes/blue-chronicles/images/logo.gif" alt="Css3c.com Floated Images" width="100" height="100" />
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <img src="http://css3c.com/wp-content/uploads/2011/06/css-button.gif" alt="Css3c.com Floated Images" width="100" height="100" />
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <img src="http://www.css3.info/wp-content/uploads/2011/05/stunningCSS3-paul-irish1.gif" alt="Css3c.com Floated Images" width="100" height="100" />
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <img src="http://css3c.com/wp-content/uploads/2010/12/CSS3FWD.jpg" alt="Css3c.com Floated Images" width="100" height="100" />
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <img src="http://css3c.com/wp-content/uploads/2010/12/CSS3FWD.jpg" alt="Css3c.com Floated Images" width="100" height="100" />
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
    1
    2
    3
    4
    5
    6
    img:nth-of-type(odd) {
      float: left;
    }
    img:nth-of-type(even) {
      float: right;
    }
    ]]>     http://css3c.com/css3/how-to-alternate-floated-images-with-css-3/feed/ 0     How to Make a Zebra Striped Table with CSS 3 http://css3c.com/css3/how-to-make-a-zebra-striped-table-with-css-3/ http://css3c.com/css3/how-to-make-a-zebra-striped-table-with-css-3/#comments Sat, 17 Sep 2011 22:29:53 +0000 admin http://css3c.com/?p=250 One of the most common ways to style tables is to set the background color of every other row. This is often refered to as “zebra stripes”. This type of striping makes the table much easier to read. But it requires that you add a class to every other table row and then set styles for them.

    This works fine, but every time you need to edit that table, you may have to edit every single row in the table to get the classes correct. For example, if you add a new row to your table, every other row below it needs to have the class changed.

    But CSS 3 makes it easy to style tables with zebra stripes. You don’t need to add any extra HTML attributes or CSS classes, you just use the nth-of-type CSS pseudo-class.
    Write Your HTML Table

    First write your table as you would normally write it in HTML. Don’t add any special classes to the rows or columns.

    Example:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
      </tr>
      <tr>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
      </tr>
      <tr>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
      </tr>
      <tr>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
      </tr>
      <tr>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
        <td>test test test</td>
      </tr>
    </table>
    1
    2
    3
    tr:nth-of-type(odd) {
      background-color:#ccc;
    }
    ]]>     http://css3c.com/css3/how-to-make-a-zebra-striped-table-with-css-3/feed/ 0     Free CSS3 Video Tutorials from Think Vitamin (Again) http://css3c.com/css3/free-css3-video-tutorials-from-think-vitamin-again/ http://css3c.com/css3/free-css3-video-tutorials-from-think-vitamin-again/#comments Mon, 11 Jul 2011 04:17:22 +0000 admin http://css3c.com/?p=244 Back in March 2011 we reported that Think Vitamin were offering free access to their entire CSS3 Video Training Course for 24 hours only.

    I’m pleased to announce that this week I received an email from Alan Johnson at Think Vitamin letting me know that once again they’ve decided to offer free access to the entire CSS3 Video Training Course, minus the Master Class project – which is only available to paid members. However, this time there is no 24 hour time limit, with the videos being available for ‘the foreseeable future’ – however long that may prove to be.

    The collection includes over 50 videos, totalling over four hours of tutorials, ranging from CSS3 basics such as border-radius, box-shadow and CSS3 gradients, to more complex subjects including CSS3 selectors, transitions, animations and transforms.

    So, if you missed them the first time around, or struggled to watch all 51 videos in 24 hours, here they are again.

    The full series of videos on offer is as follows:

    Borders

    Gradients

    Animation

    Typography

    Media Queries

    Selectors

    Backgrounds

    ]]>     http://css3c.com/css3/free-css3-video-tutorials-from-think-vitamin-again/feed/ 0     Css button style http://css3c.com/css2/css-button-style/ http://css3c.com/css2/css-button-style/#comments Tue, 14 Jun 2011 23:44:42 +0000 admin http://css3c.com/?p=239

    With the button is to use background image, css writing for them, with possible repeat backgorund case is very simple. However, with a button on the style as how they can be scaled according to the text ..

    With people writing each button css normally would cut into an image. It is not necessary, we can write the following:

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    a.button {
    background: transparent url(button-right.png) no-repeat scroll top right;
    display: block;
    float: left;
    height: 24px;
    margin:5px 6px 0 0;
    padding-right: 25px;
    text-decoration: none;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    }
    a.button span {
    background: transparent url(button-left.png) no-repeat;
    display: block;
    line-height: 22px;
    padding: 0 0 5px 12px;
    text-shadow: 0 -1px 0 #333;
    }
    a.button:hover span{
    text-decoration:none;
    }

    Html:

    1
    2
    3
    4
    5
    6
    7
    <div style="width:200px; margin:0 auto;">
        <a class="button" href="#"><span>View demo</span></a>
        <a class="button" href="#"><span>CSS3</span></a>
        <a class="button" href="#"><span>Css3 News</span></a>
        <a class="button" href="#"><span>Jquery & Javascript</span></a>
        <a class="button" href="#"><span>Css3 and html5</span></a>
    </div>


    View demo

    ]]>     http://css3c.com/css2/css-button-style/feed/ 0     CSS3 Animations Support in Firefox 5 Beta http://css3c.com/css3/css3-animations-support-in-firefox-5-beta/ http://css3c.com/css3/css3-animations-support-in-firefox-5-beta/#comments Mon, 06 Jun 2011 15:48:08 +0000 admin http://css3c.com/?p=236 Released on Friday 20th May 2011, Firefox 5 beta brings long awaited support for the CSS3 Animations module, released as a W3C working draft in March 2009, to Mozilla’s popular web browser.

    The following properties are supported, although you’ll have to use the ‘-moz-’ prefix for the time being:

    • animation-delay
    • animation-direction
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function

    CSS3 Animations have already been supported by Webkit based browsers (eg. Safari/Chrome) for over two years, since February 2009, although as with Firefox a prefix is required, in this case the ‘-webkit-’ prefix.

    For a great demonstraion of what can be achieved using CSS3 Animations, check out Anthony Calzadilla, Andy Clarke and Geri Coady’s Madmanimation demo (works in both the Firefox beta and current versions of Safari/Chrome). There’s also some basic examples on the Mozilla Hacks Blog here and Paul Rouget has ‘hacked’ Anthony Cadzadilla’s famous CSS3 AT-AT demo to work in Firefox here.

    You can find full details of CSS3 Animations support in Firefox 5 on the Mozilla Developer Network, and details of CSS3 Animations support in Webkit can be found on the Webkit blog. To date Webkit and Firefox are the only browsers to have implemented CSS3 Animations.

    You can download Firefox 5 beta here and further details on the other improvements in Firefox 5, including improved standards support for HTML5, XHR, MathML, SMIL, and canvas, can be found in the release notes.

    ]]>     http://css3c.com/css3/css3-animations-support-in-firefox-5-beta/feed/ 0     Angles in Gradients http://css3c.com/css3/angles-in-gradients/ http://css3c.com/css3/angles-in-gradients/#comments Wed, 25 May 2011 02:19:30 +0000 admin http://css3c.com/?p=230 Posting on behalf of Tab Atkins about an open spec issue:

    I’ve been pretty adamant for some time that gradients should use the math-y interpretation of angles, where 0deg is East and 90deg is North. In addition to matching what you learn in school about polar coordinates, it matches what tools like Photoshop expose. Other members of the WG, though, have been equally adamant that we should more closely match existing language conventions, particularly that bigger angles mean clockwise rotation.

    The strength of my conviction has eroded over time. It really is true that every other use of angles uses them to represent clockwise rotations. In SVG, angles are present in transforms and the ‘glyph-orientation’ properties, while in CSS they’re present in transforms, ‘image-orientation’, and the ‘azimuth’ and ‘elevation’ aural properties. In all of them (save ‘elevation’, which rotates in a different axis), the rotation is clockwise.

    I also know that, as an author, there have been several places where SVG has annoyed me because it does two similar things in an inconsistent way (unfortunately, I don’t remember exactly what things annoyed me). I suspect these things were designed to be consistent with other tools that SVG wanted to align with. I, having never used these tools, don’t understand this and just see the self-inconsistency. I’d prefer to avoid a similar situation with CSS, where users that don’t remember their polar coordinates and never used gradients in Photoshop look at CSS gradients and just see that the angles are defined in a way that’s inconsistent with how they’re defined elsewhere. Plus, an argument can be made that actually respecting polar coordinates would involve clockwise rotation, as the angles should progress from the X-axis toward the Y-axis, which points downward on the screen.

    So, we have three choices:

    • A) Keep the angles as they are, with 0deg=East and 90deg=North (counter-clockwise)
    • B) Switch to screen-coord polar, with 0deg=East and 90deg=South (clockwise)
    • C) Switch to bearing angles (compass directions), with 0deg=North and 90deg=East (clockwise)

    Except for ‘azimuth’ [which uses '0deg' to indicate straight ahead], current properties are consistent with either B or C, as they just use the angles for rotation, not direction.

    What do you think?

    ]]>     http://css3c.com/css3/angles-in-gradients/feed/ 0     Book Review: Stunning CSS3 by Zoe Gillenwater http://css3c.com/css3/book-review-stunning-css3-by-zoe-gillenwater/ http://css3c.com/css3/book-review-stunning-css3-by-zoe-gillenwater/#comments Wed, 25 May 2011 02:11:15 +0000 admin http://css3c.com/?p=224 Stunning CSS3 by Zoe Gillenwater is a project-based book offering a solid guide to what’s possible and what’s coming around the corner with CSS.

    Published by PeachPit, Stunning CSS3 is set in the same easy-going, information-packed writing style that carried out in her previous book, Fluid Web Layout.

    Over the course of seven chapters, Gillenwater goes through CSS3 advances as follows:

    While Gillenwater’s book covers some of the more popular CSS3 effects like ‘border-radius’, ‘@font-face’, and ‘text-shadow’, she also reviews some of the less known like HSLA, ‘word-wrap’ and ‘background-clip’, just to name a few.

    However, it’s the last two chapters where the book really shines. A continuation of sorts from her previous book, Flexible Web Design, Gillenwater tackles media queries and multi-column layouts in a language that is accessible for CSS beginners while never alienating the CSS professional.

    A sample portion of the chapter “Different Screen Size, Different Design” is available online.

    Paul Irish, developer on Modernizr among the many other things he does, praised Gillenwater’s Stunning CSS3 on Twitter:

    @zomigi reading your css3 book. really enjoying it so far; excellent detail and very informed advice. A+++

    Stunning CSS3 can be bought as a printed book or an ebook from PeachPit, or wherever fine tech books are sold.

    The author’s web site for the book can be found at StunningCSS3.com.

    ]]>     http://css3c.com/css3/book-review-stunning-css3-by-zoe-gillenwater/feed/ 0     More Module Updates from the W3C http://css3c.com/css3/more-module-updates-from-the-w3c/ http://css3c.com/css3/more-module-updates-from-the-w3c/#comments Mon, 25 Apr 2011 01:31:41 +0000 admin http://css3c.com/?p=212 The W3C CSS Working Group have introduced a new module to CSS3, the CSS3 Grid Layout module, as well as released two further updated specifications, for the CSS3 Multi-column Layout and CSS3 Text modules.

    Let’s take a closer look at what’s new.

    CSS3 Grid Layout

    Initially proposed by Microsoft, and first released as a W3C working draft on 7th April 2011, the CSS3 Grid Layout module introduces a new layout method to CSS3.

    According to the specification:

    Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.

    Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. For example, the children of the Grid can position themselves with Grid Lines such that they overlap and layer similar to positioned elements.

    In addition, the absence of content structure in the Grid helps to manage changes to layout by using fluid and source order independent lay out techniques. By combining media queries with the CSS properties that control layout of the Grid and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, without needing to alter the semantic nature of their content.

    You can find the latest version of the specification here.

    At present, Microsoft’s Internet Explorer 10 platform preview is the only browser to have implemented the Grid Layout module, a demonstration can be found here.

    CSS3 Multicolumn Layout

    The CSS3 Multicolumn Layout module was released as a candidate recommendation on 12 April 2011.

    According to the specification, the main updates from the previous working draft are as follows:

    The specification was updated in April 2011 to correct a contradiction between the text and the pseudo-algorithm in section 3.4. The pseudo-algorithm was corrected and also made easier to read. The wording of a few other sections was improved in places, without changes to the functionality.

    You can find the latest version of the specification here.

    CSS3 Text

    An updated working draft of the CSS3 Text module was released on 12 April 2011.

    According to the specification there are several major changes, including:

    • Rename ‘large-kana’ to ‘fullsize-kana’.
    • Merged ‘ hyphenate-limit-before ‘ and ‘ hyphenate-limit-after ‘ into ‘ hyphenate-limit-chars ‘ and added a word-length limit as well.
    • Renamed ‘ white-space-collapsing ‘ to ‘ bikeshedding ‘.
    • Added ‘ tab-size ‘ property.
    • Removed ‘ keep-words ‘ value of ‘ word-break ‘.
    • Removed optional second hyphenation character.
    • Added ‘ hyphenate-zone ‘ property.
    • Removed ‘ unrestricted ‘ value of ‘ text-wrap ‘.
    • Added ‘ hyphenate ‘ value to ‘ word-wrap ‘.
    • Merged ‘ text-align-first ‘ into ‘ text-align ‘.
    • Removed ‘ last ‘ value of ‘ hanging-punctuation ‘.
    • Added cancel values to ‘ text-decoration-lines ‘/’ text-decoration ‘.
    • Removed ‘ all ‘ value of ‘ text-decoration-skip ‘.
    • Changed ‘ wave ‘ value of ‘ text-decoration-style ‘ to ‘ wavy ‘.
    • Changed syntax of ‘ text-emphasis-position ‘ to allow more combinations of position values.
    • Added an informative appendix on cultural correlations of various CSS3 Text features.
    • Added an appendix to categorize scripts according to the categories used to define, e.g. ‘ text-justify ‘ behavior.

    The updated specification can be found here.

    ]]>     http://css3c.com/css3/more-module-updates-from-the-w3c/feed/ 0     Internet Explorer 10 Debuts at Mix 2011 http://css3c.com/css3/internet-explorer-10-debuts-at-mix-2011/ http://css3c.com/css3/internet-explorer-10-debuts-at-mix-2011/#comments Fri, 15 Apr 2011 23:50:34 +0000 admin http://css3c.com/?p=210 With Internet Explorer 9 barely out of the labs, Microsoft yesterday caught many developers by surprise, with the launch of the first platform preview of the latest incarnation of their popular web browser, Internet Explorer 10, at this years Mix conference.

    The latest version of Internet Explorer, currently only three weeks into the development cycle, already boasts an impressive array of improvements, particularly in terms of CSS3 support, addressing many of the areas missed by IE9. For this release, Microsoft has paid particular attention to the CSS3 layout modules, with the platform preview offering implementations of the CSS3 Multi-column Layout module, the Flexible Box Layout module, and the recently announced CSS3 Grid Layout module.

    In addition to the improved support for the differing CSS3 layout techniques, the platform preview also offers support for CSS3 gradients, which should make many developers happy, having previously voiced disappointment that support for gradients was not included in Internet Explorer 9. Additional CSS3 support has already been promised for future IE10 preview releases including CSS3 Transitions and 3D Transforms.

    The development process looks set to follow a similar timescale to IE9, which was announced at last years Mix conference, with regular platform previews scheduled for release every 8 – 12 weeks.

    You can download the platform preview here and read more on the IEBlog here.

    Several new demos, showing off some of the new functionality included in IE10, have been added to the IE Test Drive site.

    ]]>     http://css3c.com/css3/internet-explorer-10-debuts-at-mix-2011/feed/ 1