Tag Archives: CSS3

Back in the swing of things

Posted on by
Reply

I’m working on a website for a friend’s nonprofit, and man how I’ve missed this freedom! Freelancing web design & development gives me a chance to work outside the realm of government regulation and accessibility requirements (aka Supporting IE6). Does that mean I abandon best practices? Certainly not! But it means I’m free of the limitations that curb my creativity from 8-5. I’ll support old Internet Explorer versions, sure. But I’ll design for the GOOD browsers first and degrade gracefully instead of accommodating these outdated gas guzzlers in the design.

Maybe I’ll put a bold red overlay for IE users…

Dear IE user, Your browser is a piece. An upgrade is highly recommended.

Yeah… that oughta get their attention.

What’s Hot [and Not] in HTML5 & CSS3

Posted on by
Reply

Courtesy of Chris Mills from Opera Software. @chrisdavidmills

  • HTML5 isn’t designed to replace HTML4
  • Adopts to the interactive nature of today’s web experience.
  • More accurate semantics (header, footer, etc.).
  • Features: Drag & Drop, Web workers, Web storage (cookies on crack), app cache, webdb, and more!
  • Syntax rules abstract more away from the developer.
  • Machine & people readable. e.g. <time datetime=”2010-06-04″>My birthday</time>
  • New form elements. e.g. input type=”range” “date” “url” “email” “slider”.
  • Built-in validation of forms! <input type=email required autofocus>
  • One problem: can’t customize validation error messages
  • <canvas id=”” width=”” height=””>Hi world</canvas> – Scriptable graphics API for drawing.
  • <video src=”” autoplay loop controls width=”” height=”” poster=”” preload=””>Alternate content if video isn’t supported by browser</video>
  •  <source src=”” type=”video/mp4″ “video/ogg”>Not much to see</video>
  • VIDEO is just another block-level element, customize it as you like. CSS, JS, etc.
  • Video Caption: <video></video><div class=”transcript”><p><span data-start=”1.3″ data-end=”2.5″>Closed captioning</span></p></div>
  • Internet Explorer is the ONLY browser not supporting HTML5 and CSS3
  • Fake-able in IE using JS: Dean Edwards’ HTML5 Library, Excanvas, SVG Web, Raphael JS for SVG
  • text-shadow: 1px 1px 1px 1px #fff;
    2px 2px 2px 2px #ccc
  • box-shadow, opacity, rgba(255,0,0,0.75), hsl(0,100%,60%), border-radius, transition-timing-function, transition-delay, transition-property, transition-duration, transform-origin, transform: scale(2)
  • CSS3 supports multiple background images!
  • Web Fonts – Download custom fonts along with web pages! FINALLY!
  • @font-face { font-family: “Blue Highway”; src: url(“http://www.com/fonts/blue.ttf”) format(“truetype”); } /* Reference at top of CSS */
  • Media Queries – Display styles depending on user attributes – e.g. screen size, etc. – @media all and (max-width:400px) {} – change layout accordingly
  • Attribute selectors – ^href= href$= title*= “chris”]:before { content: url(heart.jpg); – inaccessible if inserting text.
  • :nth-child(even) { }
  • There’s more! Multiple bg images, multiple col layout, CSS animations, 3D transforms, etc.
  • Opera web standards curriculum: www.opera.com/wsc

Opera developer site: dev.opera.com

www.html5doctor.com

All of the above information is provided by Opera Software under Creative Commons licensing. In other words, take it, use it, share it, spread it!

“Interact with Web Standards” .com