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

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

Cross-browser HTML5 video tag with fallback for Flash users

Ted — Sun, 13 Jun 2010 17:00:44 +0000

Apple’s lack of support for Flash on the iPhone and iPad has forced people to reconsider the value of HTML5 and its video tag. It’s no longer something to put off until the future. However, adding HTML5 video support to your site AND continue to provide a Flash option for older browsers (I.E.) is not as simple as you might expect.

While the video tag has been standardized, there is a lack of consensus for supporting the codecs used to package the videos for distribution and playback. Some browsers are supporting the OGV format, some support the more popular but licensed mp4 format. Others, such as Chrome, will support both. To make it even more exciting, there is a new version under development to make a truly open-sourced format: WebM.

This means your video tag needs to define multiple movie sources to make it playable on all browsers. It sounds complicated because it is. Luckily, Kroc Camen has written a great article and code pattern for adding a cross-browser video tag with fallback to Flash for the older browsers: Video for Everybody!.

The article is full of great advice from a programmer that has learned the stuff the hard way. Here’s an explanation of how you’ll need to adjust your htaccess file.

Ensure your server is using the correct mime-types. Firefox will not
play the OGG video if the mime-type is wrong. Place these lines in your .htaccess
file to send the correct mime-types to browsers
AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm
Video for Everybody! – Kroc Camen

Related Resources

HTML5 video Libraries, Toolkits and Players – Specky Boy
JW Player: Flash Video Player – a base flash movie to use as your fallback flash movie
html5 video fallbacks with markup – Mozilla Hacks
Fed Flix – Repository of US Government films in various formats. These are good for testing your video markup.

ARIA support with the YUI library

Ted — Wed, 06 Aug 2008 16:15:51 +0000

AJAX and DHTML have made web sites more interactive and easier to use. At least for visitors who are not using a screen reader. Screen reader users have to struggle with pages that lose focus, change without prompting the user of new data, and much more. However, there are many developers working on solutions to this problem.

Todd Kloots, of the Yahoo User Interface group was one of the first to develop accessible javascript libraries with the YUI menu package. He just published a blog post on the YUI web site about adding ARIA support to the YUI tab package. This information could also help you add this functionality to your existing YUI-based applications.

Here’s how Todd describes the goal

The YUI TabView Control is built on a strong
foundation of semantic markup that provides users with some basic accessibility. But while TabView looks like a desktop tab control, screen readers don’t present it as an atomic
widget, leaving users to figure out how the various HTML elements that compose a TabView relate to each other. However, through the application of the WAI-ARIA Roles and States, it is possible to enhance TabView’s accessibility such that users of screen readers perceive it as a desktop tab control.

Enhancing TabView Accessibility with WAI-ARIA Roles and States – Todd Kloots

The following video shows how this approach works with Firefox and a screen reader.

YUI TabView with ARIA roles and states/Todd Kloots @ Yahoo! Video

Progressive enhancement of links using the CSS attribute selector

Ted — Wed, 04 Jun 2008 20:13:00 +0000

Attribute Selector Test Page

We have avoided using CSS3 rules for too long. It’s been difficult to justify using rules that won’t work for a significant portion of our audience, Internet Explorer 7 and below. However, Internet Explorer 8 is coming out soon and does work with the features we like.

I think it’s fairly safe to assume IE7 users will upgrade to IE8 within a short time. Those stuck with IE6 for one reason or another will slowly disappear as they are given new computers or their locked down environments are upgraded.

So, with the future of CSS3 functionality within reach, I’ve been energized to begin experimenting again. I’ll be writing a series of blog posts over the next few months that look at CSS3 functionality as a progressive enhancement. How can we continue to deliver a perfectly fine web site to IE6 and IE7 and mobile phones while enhancing the functionality of more modern browsers and devices?

Attribute Selectors

CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code. Attribute selectors give you power to write CSS that pinpoints the stuff you already code, without having to go back and add classes or ids. I’ve written previously about using attribute selectors to let your users know the language of a site they are about to visit. This trick relies on the rarely used hreflang attribute, which identifies the language of the site targeted in a link.

There are many other attributes in your HTML, from table headers, image src, link titles, and selected options. Think about all of those juicy attributes just waiting to be targeted. Also think about how you could actually do something useful with them.

Announce the file type of a link with CSS

I once worked for a company that had hundreds of thousands of static HTML pages in their intranet. With no content management system; it was impossible to make global changes. The only thing they shared was a common set of style sheets. Does this sound familiar? Follow along as we increase your site’s usability in a less than perfect, but efficient way.

First off, for accessibility, you need to let users know when a link will open a file, what type it is, and how large it is. This is best done by adding it to your HTML code:

Foo presentation (.pdf, 5kb)

That delivers the information to everyone, regardless of their browser. This, however takes time and is a daunting task for updating legacy code.

We can, however, use the atttribute selector to target the extension of the link to display the icon and insert the text describing the file type. Here’s the sample HTML code:



sample zip link
sample pdf link
sample Word link
sample Executable link
sample png image
sample MP3 file

It’s a simple list of links for different types of files. We’ll be looking at the extensions: .zip, .pdf, .doc, .exe, .png, and .mp3. Feel free to extend this list to any extension you so desire. This would be especially helpful for a company that uses proprietary file types within their intranet.

Now, let’s look at the CSS:

a[href$="zip"], a[href$="pdf"], a[href$="doc"], a[href$="exe"], a[href$="png"], a[href$="mp3"] {padding-left:20px; background:url(bg-file-icons.png) no-repeat 0 0;} a[href$="png"]{background-position: 0 -48px;} a[href$="pdf"] {background-position: 0 -99px;} a[href$="mp3"]{background-position: 0 -145px;} a[href$="doc"]{background-position: 0 -199px;} a[href$="exe"]{background-position: 0 -250px;}

a[href$=".zip"]:after{content: "(.zip file)"; color:#999; margin-left:5px;} a[href$=".pdf"]:after{content: "(.pdf file)"; color:#999; margin-left:5px;} a[href$=".doc"]:after{content: "(.doc file)"; color:#999; margin-left:5px;} a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;} a[href$=".mp3"]:after{content: "(.mp3 file)"; color:#999; margin-left:5px;} a[href$=".png"]:after{content: "(.png file)"; color:#999; margin-left:5px;} a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}

See the final test page.

Pattern matching in the attribute selector

We have some limited “regular expression” functionality in CSS3. We can search for an attribute’s presence and match a pattern within the attribute’s value.
Patrick Hunlon has a good summary of the pattern matching:

[foo] — Has an attribute named “foo”

[foo="bar"] — Has an attribute named “foo” with a value of “bar” (“bar”)

[foo~="bar"] — Value has the word “bar” in it somewhere (“blue bar stools”)

[foo^="bar"] — Value begins with “bar” (“barstool”)

[foo$="bar"] — Value ends with “bar” (“I was at the bar”)

[foo*="bar"] — Value has bar somewhere (“I was looking for barstools”)

Attach icons to anything with CSS

The CSS is simply looking to see if the desired extension is at the end of the link href. If so, apply the following styles.

Adding an icon to the link

First, we are match any of the desired file extensions. We then add a background image and some padding on the left side with a bulk rule. Then the background position on the sprite is adjust for each particular link type. Combining multiple icons into one background image reduces the number of files the user has to download, making your page faster. This will work with any browser that recognizes attribute selectors, including Internet Explorer 7. However, support for more obscure attributes may be spotty.

There’s another peculiarity with pattern matching. Some attributes are case sensitive while others are not. The href attribute is NOT case sensitive, so the above rules will also work if your image name was FOO.ZIP, foo.Zip, or foo.zip.

Adding the descriptive text

Now, we are going to add a bit of descriptive text to each link. We can’t describe the file size, but we can tell the user what type of file it is. This is using the :after(content:) functionality and is supported by Internet Explorer 8 (yeah!!!) but not Internet Explorer 7 and below (boo!!!).
We will also adjust the color and give it a bit of spacing.

A big step forward with a small chunk of work

There you have it. A small chunk of CSS coding has now added substantial usability to your legacy pages. While the CSS version is not as accessible as having the data in the actual link code, it’s a significant improvement over nothing at all. Further, there’s no harmful effect on browsers that do not understand the function. You’ve added information, but haven’t taken anything away. This is a win in my book. To save some time and effort, you could just download and use this package of CSS and icons from Alexander Kaiser.

This rather simple example of attribute selectors and pattern matching can open your eyes to many possibilities. There are a number of developers that have been expoloring this potential for the past few years. Take a look at some of these resources for more ideas and have some fun.

CSS3 – Atribute Selectors Definition W3C
CSS 3 Selectors Explained
CSS: A Tribute to Selectors
YUI: Selector Utility Use CSS3 selectors in JavaScript
Dynamic File Type Notations
Cool use for CSS attribute selectors – Hiding banner ads with CSS
Showing Hyperlink Cues with CSS
Showing Hyperlink Cues with CSS

IE7 and IE8 hack behavior

Ted — Wed, 05 Mar 2008 22:59:53 +0000

We’ve had the luxury of hacks to fine tune Internet Explorer bugs. Internet Explorer 7 disabled the majority of hacks, with the exception of the * hack. This hack allowed you to send a style only to Internet Explorer by prefacing an attribute with an asterisk.

/*this is for all browsers*/ #main p {color:black;} /* this is for Internet Explorer */ #main *p {color:red;} /*this is ignored by IE7 and will target IE6 */ #main _p {color:green;}

This set of hacks allowed us to control IE7 and IE6. However, IE8 does not recognize the * hack. Special IE8 rules will either need to be defined with conditional comments, the Microsoft proposed meta tag, or some new hack to be discovered. Let’s hope the mature version of IE8 will reduce the need for these hacks.

For more information on the above hacks, visit an earlier post: IE7 Hacks

Internet Explorer 8 beta released for testing

Ted — Wed, 05 Mar 2008 22:50:10 +0000

The MIX 2008 conference is this week and Microsoft is showing off some of their latest tools. One of these is the much anticipated and discussed Internet Explorer 8 browser. It’s important to remember that this is still a beta 1 release and is much better than the IE7 beta 1. This one actually has significant changes.

Download Internet Explorer 8

You can download Internet Explorer 8, Beta 1 from the Microsoft Developer site. However, here are a few things to keep in mind:

This installation takes some time, about 15 minutes, and will require a restart of your computer.
It will replace your existing Internet Explorer and is not available as a stand-alone browser.
It renders in standards-mode as a default. You’ll see a button to render in IE7 mode. This is helpful to see the changes between the versions.
Many sites will have significant layout issues in the standard view. You may need to re-evaluate your conditional comments to specify IE7 instead of greater than IE6
IE8 is ignoring the * hack! This means you can use the underscore hack for IE6, the * hack for IE6 and IE7 and … um… I don’t know yet for IE8.

Is IE8 better than IE7?

Internet Explorer 8 passes the Acid2 Test.
It understands CSS attribute selectors and generated content.
IE8 handles my international test page fine.
It understands :hover on non-links but is still buggy. Here’s a good test page with multiple CSS3 styles.
It seems to have more integration with social platforms, maps, etc. Perhaps this is a nod towards Flock?

It’s still really early to find all of the bugs and benefits of the new browser. The team needs to be commended for the fast development and their willingness to listen to criticism and change the default behavior at such a late point. I look forward to the more mature releases.

Updates

Leave it to Hedger Wang to find and document the first IE8 bug: See how IE8 breaks

Ready to try a different browser

Ted — Wed, 05 Sep 2007 18:52:58 +0000

I’ve been frustrated lately with Firefox. It has been crashing several times a day on my laptop, eating up memory, and slow to start. Perhaps I have too many extensions, perhaps the browser has gotten too heavy, perhaps I’ve gotten too comfortable with it. So, it’s time to try another browser: Opera.

I’ve tried Opera before and have always had it on my machine. However, there are a few things I’ve become dependent on in Firefox and need to figure out how to do the same thing in Opera before making a permanent move.

Firefox dependencies

Linky: I love this extension and the ability to select a bunch of links and open them in separate tabs. I think Opera has native support for this, but I couldn’t figure it out.
Firebug and Web Developer Toolbar: How can we live without them?
Bookmark toolbar on the top. I’ve already got my bookmarks setup and need to access them quickly. I don’t like the sidebar treatment in Opera
Password memory: the Opera system so far seems clunky. How do I get it to remember my password after entering a protected domain, i.e. internal network
Switch Proxy: This firefox extension lets me switch my proxy instantly.
Pimpzilla: ok, I can live without this theme, but it is pretty darn nifty

Help?

If you are an Opera user, leave a comment on how to solve some of these issues. I’m sure I’m not the only one out there that would like to know.

Web Accessibility Toolbar for Opera

Ted — Tue, 17 Apr 2007 16:10:40 +0000

Hot off the presses. Download the Web Accessibility Toolbar for Opera if you are an Opera user or develop for Opera as a supported browser.

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

identify components of a web page

facilitate the use of 3rd party online applications

provide links to references and additional resources.

The Paciello Group

Browser wars get the star geek treatment

Ted — Mon, 12 Feb 2007 17:14:00 +0000

The Web Sig in the Silicon Valley is putting together a very impressive meeting at the end of the month. Browser Wars, it’s a spoof of Star Wars and the dreaded browser wars of the 90′s.

I’m the first to cringe when someone discusses Star Trek or Star Wars in reverential tones. The theme alone is enough for me to think twice about this event. However, this night at the Yahoo! campus will bring out the big guns of the browsers (Chris Wilson from IE, Mike Shaver from FireFox, and Håkon Wium Lie from Opera are members of W3C).

The three of them will discuss the DOM object, the future of browsers, and more. Here’s a snippet of the announcement.

Attack of the DOMs is very relevant in this Browser Wars Episode II as Web 2.0 increasingly utilizes AJAX in interface design, functionality and web applications. Each browser implements its supported DOM. IE7 is known to suffer in performance from memory leaks that are related to its inherited DOM architectural design. Firefox quickly gains popularity with its DOM strategy among Web 2.0 communities with faster loading time. DOM Level 2 CSS allows programs and scripts to dynamically access and update the content and of style sheets documents. No designers can deny the importance of the interaction between CSS and DOM in rendering site design properly across browsers.
Web Sig

If you are in the Silicon Valley, hurry up and reserve your seating today! This will fill up quickly and you shouldn’t pass up the opportunity to see Håkon Wium Lie, the inventor of CSS and one of the original creators of the “internet”. The event is free to attend and Yahoo! will provide snacks and free sodas.