Advanced CSS Design Resources - last-child.com » CSS

Yahoo! Accessibility Lab code library

Ted — Fri, 12 Aug 2011 21:13:19 +0000

I haven’t been posting much to this blog for the past year. But that’s not because I’ve been lazy. I’ve been writing a lot of tutorials about creating more accessible web sites on the Yahoo! Accessibility Lab’s Code Library.

You’ll find some great resources for using CSS, basic HTML, JavaScript, and ARIA.

CSS3 Gradient Backgrounds and Controlling Their Height

Ted — Thu, 02 Dec 2010 21:42:28 +0000

Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.

First off, I’m going to use the excellent Colorzilla gradient creator to establish the colors.
div#gradientbg { /*the following rules are from colorzilla*/ background: #e6f0a3; /* old browsers */ background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#FFFFFF); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=1 ); /* ie */ }

This works great for applying a background to the entire page. But we want to limit this to just the header. We’ll need two declarations. First a browser-specific rule (background-size). This, however could cause a series of gradient bands to tile across the screen. so simply add the no-repeat as well.
-moz-background-size:100% 100px; ... background:no-repeat;

Final CSS

div#gradientbg { display:block; width:500px; height:400px; border:1px solid #ccc; /*the following rules are from colorzilla*/


  background: #e6f0a3; /* old browsers */
  background: no-repeat -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%);

  -moz-background-size:100% 100px;/* firefox */
  background:  no-repeat -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638),

  color-stop(51%,#c3d825), color-stop(100%,#FFFFFF));

  -webkit-background-size:100% 100px;/* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#FFFFFF',GradientType=0 ); /* ie */ }

View the example page

Yahoo! to downgrade IE6 in 2011

Ted — Thu, 04 Nov 2010 15:28:55 +0000

Yahoo! introduced the Graded Browser Support grid years ago to give developers a guideline on what browsers deserved the greatest amount of resources for debugging, hacking, and development. This has been well received amongst the developer community as a justification for not dwelling on obscure browsers, such as IE5.5 for mac. This has made our code cleaner and easier to maintain as the browser-specific hacks are no longer needed.

Yahoo just announced the GBS change we’ve all been waiting for. IE6 will be downgraded to a C-status browser in Q1, 2011. This means I can finally upgrade my own laptop to IE8! This means we can focus on building for the future and not the past. Excuse me as I hyperventilate over the joy.

Internet Explorer 6: We are forecasting the transition of Internet Explorer 6 from A-grade to C-grade in the next GBS update. The calculus here is simple: The proliferation of devices and browsers on the leading edge (including mobile) requires an increase in testing and attention. That testing and attention should come from shifting resources away from the trailing edge. By moving IE6 to the C-grade, we ensure a consistent baseline experience for those users while freeing up cycles to invest in richer experiences for millions of users coming to the internet today on modern, capable browsers. Note: This forecast should not be taken as an indication that IE6 users will see an abrupt change in their experience of Yahoo! websites in Q1 2011; the change in philosophy toward IE6 will be reflected in new development and products and applied in ways that make sense based on product needs.
Graded Browser Support Update: Q4 2010 – Eric Miraglia and Matt Sweeney, Yahoo! Developer Network

A quick CSS3 sibling test with the video tag

Ted — Tue, 15 Jun 2010 15:56:31 +0000

I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup



...
...

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS


section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

YUI 3.0 Gallery now includes modernizr functionality

Ted — Tue, 25 May 2010 22:51:14 +0000

Are you working on an HTML5 project and using the latest YUI library from Yahoo? If so, you’ll be happy to know that you can use the modernizr functionality within the YUI3 code.

This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr).

This is a wrapper for Modernizr library that is used to detect support for many HTML5 & CSS3 features on a browser. More documentation here – http://www.modernizr.com/docs/ Please note that the module does not add the Modernizr object to the global namespace. Instead it will be local to the YUI instance.

Modernizr YUI Library

Modernizr was created to make HTML5 development consistent. It gives hooks for JS and CSS to support the advanced features.

Dive into HTML5 should be everyone’s intro to the standard

Ted — Tue, 20 Apr 2010 22:30:50 +0000

I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

HTML5 Helpful Links

Ted — Sat, 03 Apr 2010 18:55:45 +0000

I’m starting to hack away at HTML5 and I’m finding that I need to start bookmarking more and more pages. There are lots of good resources out there. Here are a few:

HTML5 structure—div, section & article – Oli.jp
HTML5 – Wikipedia
Dive Into HTML5
The Best HTML5 Slides Ever
HTML5 Forms
- Have a Field Day with HTML5 Forms – 24 Ways
- HTML5 Forms Spec – W3C
- Improve your forms using HTML5 – Dev Opera
The HGroup Element HTML5 Doctor
HTML5 id/class name cheatsheet – Oli.jp
Preparing for HTML5 with Semantic Class Names – John Tan
12 resources for getting a jump on HTML 5 – Authentic Boredom
HTML5 Doctor
HTML5 Gallery
HTML5 video, canvas accessibility, microdata – Bruce Lawson
Why browsers treat HTML5 elements as inline
HTML 5 elements test – Bruce Lawson
HTML5 Superfriends – Zeldman
HTML5 structure—nav, aside, figure & footer
HTML5 on Delicious
HTML5 Reset Stylesheet HTML5 Doctor
CSS3 Gradients
- CSS3 Linear Gradients- Dynamic Drive
- Quick Tip: Understanding CSS3 Gradients – Steven Azari
CSS3 Fonts
- CSS3 Web Fonts spec – W3C
- Delicious – a free font to try – exljbris Font Foundry
- CSS3 Embedding a Font Face – Zen Elements
- The Potential of Web Typography – Craig Mod
- Beautiful Fonts with Font Face – Mozilla
- Typekit – A font hosting service for web developers
Brain Dump of Real Time Web(RTW) and WebSocket – Bamboo Blog
CSS3 Info

HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5

Ted — Thu, 01 Apr 2010 16:43:27 +0000

I went to the The Chronicles of Web Standard III – The Voyage of the HTML5 presentation by Silicon Valley Web Builder last night. Here are some quick notes I took before my battery died.

Please note: I am far from an expert on HTML5 and welcome any comments and/or corrections to the following notes.

The speakers were

Ben Galbraith, Co-founder at Ajaxian.com
Brad Neuberg, Developer at Google
Chet Haase, Adobe Flex SDK team member
Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

CSS3
webGL
geolocation
web workers
web storage
web sockets
canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

HTML5 Resource: HTML5 Doctor

Ted — Wed, 31 Mar 2010 17:54:25 +0000

I used to think HTML5 was just a pipe dream; something that was a nice idea but had no legs. However, the recent advancement of smart phones makes this the perfect approach for building web-based phone apps. Hence, my interest now in joining the HTML5 game.

There’s a great resource for those like me starting to dip their toes into the HTML5 pool: HTML5 Doctor. This web site is a collaboration between some of the biggest and brightest stars of web development: Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

The article How to use HTML5 in your client work right now has some interesting suggestions on adding HTML5 functionality to your existing projects. This works hand in hand with using advanced CSS3 rules. Don’t break IE6, but start letting the advanced browsers and platforms give your users more functionality.

Here’s a summary of HTML5 bits that you can begin using today.

Use the HTML5 doctype and character set.

Use the simplified

Advanced CSS Design Resources - last-child.com » CSS

Yahoo! Accessibility Lab code library

CSS3 Gradient Backgrounds and Controlling Their Height

Final CSS

Yahoo! to downgrade IE6 in 2011

A quick CSS3 sibling test with the video tag

YUI 3.0 Gallery now includes modernizr functionality

Related articles by Zemanta

Dive into HTML5 should be everyone’s intro to the standard

Related articles by Zemanta

HTML5 Helpful Links

Related articles by Zemanta

HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5

Canvas vs. SVG

CSS3 Advancements

Web Workers

You can participate

Related articles by Zemanta

HTML5 Resource: HTML5 Doctor