Zoom layout There are many more people who aren’t blind but experience some form of vision loss or impairment. These people would never have need for a screen reader, and wouldn’t necessarily benefit from the typical measures we’ve taken to ensure our pages are accessible to blind people. To some extent, we’ve been ignoring this large group of low-vision users, assuming their browser controls for resizing text are enough to enable reading of our pages. Or that their own screen magnification software does the job well enough, so we don’t need to bother. Some designs easily handle quite a few bumps up in text size. Others start to fall apart more quickly than they should because of narrow, fixed-width columns. Many of you probably know how difficult it is to read text when you’re forced to scroll both vertically and horizontally. This can parallel the experience of using a screen magnifier to read most multi-column pages. Another means of giving your visitors control over the content on your website. If a site already takes advantage of CSS for layout, offering a Zoom layout option is trivial.

ARC – Adam’s Radio/Checkbox Customization Method is an experiment using Javascript and CSS to customize the appearance of radio buttons, while remaining accessible. The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style. The beauty of using the labels to display the custom image is that the design is inherently accessible – that is, clicking on the label also selects the radio (by design), so the action is guaranteed to occur. This means that if you disabled styles, javascript, or both, the widget-group still works as per-usual. When javascript is disabled the initARC() code is not executed upon load. This code associates an onClick() action listener to the widget’s associated label elements. By not having the onClick() action inline (inside the HTML code) the HTML code for the radio and labels are kept as simple and clean as possible.

Image (Replacement) Maps Most of you are familiar with image replacement techniques for headings and horizontal/vertical menus, but what about using it for menu or image maps that have different X and Y co-ordinates.There is a special technique for this. Requirements: the replacement must solve the screen reader problem, and it must address the "images off, css on" problem. It is also hoped that a solution will be found that reduces the need for empty <span> elements. The successful technique must work in browsers back to 5.x, but as of the time of writing none of these appear to fail so browser support matrices will be spared.

Quirks mode and strict mode are the two ‘modes’ modern browsers can use to interpret your CSS. This page gives a short overview of the reasons for and the differences between these two modes.

CSS Background Images Web Standards based development involves many things – using semantically sound HTML to provide structure to our documents or web applications, using CSS for presentation and layout, using JavaScript responsibly, and of course, ensuring that all that we do is accessible and interoperable to as many people and user agents as we can. Here are some naughty examples of CSS background images with their nicer, more accessible counterparts.

Image replacement is a topic which keeps reappearing on websites and in books. There are whole sections devoted to the pros and cons of each method in books such as Web Standards Solutions and The Zen of CSS Design. Image replacement method requires no additional <span>s. But Phark is known to cause scrollbar issues in certain browsers and breaks in IE5 and of course ‘breaks’ in the rare CSS on, images off scenario…

ACJ’s Language specific styling: quotation marks CSS provides a selector for language specific styling. This article shows some use case examples of how authors may use this tool to apply quotation marks to quotations on a language specific level.

Image map for detailed information. Just hover your mouse over the painting to reveal three areas of interest. Then hover over each area to reveal an enlarged detail with text. This method could be used on an educational site to give information and enhanced details of images in general. Works in IE5.5 and almost works in IE5.01.

CSS: Map Pop An image map can be very useful but normally employs JavaScript. Not this time. This experiment uses a single unordered list and a pair of spans to create such a map, with CSS pop-ups providing more information about the mapped hot-spots. This is CSS put to the test. Get the XHTML, CSS, source. Go to Experiments main or CSS: Map Pop entry.

Image Cross Fader Redux. It uses unobtrusive DOM scripting and semantic markup to achieve its goals, and is somewhat less abusive of the CPU in Firefox. It also works in Safari – the original version was written prior to Safari supporting the CSS3 "opacity" property. Opera doesn’t support opacity, so the images will just flip in that browser. Following the unobtrusive philosophy, the document is completely usable when javascript isn’t available. This is accomplished by overwriting the style sheet with one designed for the application in the so_init() method. If javascript isn’t available, the user gets an arms length list of photos.

Many people ask how the CSS Table Gallery works. It is actually embarrassingly simple. The development environment was the latest XAMPP on a Thinkpad T40 laptop with XP professional and Homesite 5 as the editor. The imagery was done with Photoshop CS. No mouse has been harmed during the development – only the trackpointer.

Trimming Form Fields Web forms often ask users for both essential and non-essential (marketing purposes and research) information. Long and complicated forms can often slow down the progress through a web site and in the case of e-commerce, can seriously hinder the sales process. You can give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS you can do it.

Awesome Form Using simple and semantic HTML, this method uses comprehensive CSS to create visually pleasing and extremely accessible web page forms for all purposes.

Prettier Accessible Forms Making web forms both pretty and accessible may be time consuming. In particular, laying out forms where the form label and input are horizontally adjacent can be a real problem. This is an example of a form-styling solution that is both accessible and portable.

Form Help without Popups Thrusting new windows upon visitors of your site is frowned upon, as it goes against device independence by assuming a windowed environment. One situation where developers feel that a new window is appropriate is with web forms. If the visitor requires help on a form field, a new window saves the visitor the trouble of having to leave the form, and possibly losing the data they have entered. This article illustrates a scripting technique to get around the problem without having to open a new window.

FACE: Faruk’s Animated CSS Enhancements A way to easily bring life and interactivity to websites without having to use Flash. Completely accessible, with easy plug-and-play implementation. For the longest time, the Web has existed as a static medium, where only animated GIFs and, later on, Flash added some life to pages. With the advent of web standards and DOM scripting, people have started to look more and more at Javascript to add interactivity to websites. With FACE this process has been made so simple that anyone can make their websites come to life, without having to know a whiff of Javascript.

PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger. The initial P+C DTR method by R. Marie Cox was lacking word-wrapping and the ability to use inner tags, so I took the code and rewrote it, giving it more flexibility and performance.

Div Thinking Cap When working with CSS you need to have the ability to analyze your layout and see how you would place your div containers. That’s what differs from working with a classic table layout. You need a whole different approach and think more in terms of containers. Stop thinking of how you’ll slice your layout, start thinking on how to put each graphic into a container.

Many Star Rating systems use JavaScript or just have an individual hover state for a single star. You can create a star rating using only CSS.

CSS Tables Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more…These tables are forward looking in the use of CSS but also degrade with a bit of grace for older browsers (NS4). Instead of all the crust that came with tables before, now you can just use the following tags…

CSS: the white-space property White-space controls how white space and carriage returns/linefeeds should be handled in a document. "Normal" is the inherent value for most HTML elements, with the exceptions having their own tags to create special behavior. This is a very powerful property and should be used with caution. Whenever I.E. encounters a space between words, it interprets it as a carriage return and the word after the space jumps onto another line, because I.E. is trying to wrap the text since you specified a .1em width on links. Other browsers are not paying any attention to that width because it is specified as #mainnav a instead of #mainnav ul li a.

CSS tricks for custom bullets Cascading Style Sheets (CSS) give Web developers precise control over a page’s typography and layout. One secret weapon of CSS-based designs is the background property, which adds images and color to the background of any element on a Web page. It opens up a creative toolbox for styling links, bulleted lists, and more. Unlike HTML, which automatically tiles background images horizontally and vertically—sometimes resulting in a frightening pattern—CSS gives designers precise control over the placement and tiling of background images. For example, you can choose to have a graphic appear only once, tile vertically, or stay put on screen even when the viewer scrolls through the page.

CSS Tests and Experiments include the following: Floats; Containers, Margins, Overflow; Centering, Shrink wrapping, Images, Miscellaneous;  hacks, inline-block; popups; Layouts, Tables; Internet Explorer Windows; IE Windows (position: relative, absolute); IE Windows (floats).

This is an example of CSS Teaser Box. Since its width is fixed, I can get away with using just two one background images (tsr.gif) to create the rounded corners and the top and bottom borders. CSS is used for the left and right borders. This box will expand vertically to contain any amount of text, of almost any size. You can view source to see the XHTML and CSS. You may also want to read the related blog posts for further notes and discussion: CSS Teaser Box and CSS teaser box revisited.

Sliding Photograph Gallery represent an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, or horizontally.

Stuff and Nonsense: Strategies for CSS Switching is an article that explores different techniques for democratizing the design through the use of style sheet switching. By applying a different CSS file to a markup document, you can drastically change any or all aspects of its design—the layout, typography, or color palette. This technique may hold incredible appeal to designers because it exponentially decreases the amount of overhead required to redesign a site. But, as you’ll see, this technique can wield incredible benefits to our site’s users, allowing them fine-grained control over a page’s presentation and, in turn, better access to the content therein. After all, it’s about throwing the gates as wide open as possible.

Spanky Corners is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work. SpankyCorners has a number of advantages over alternative rounded corners methods. Spanky requires no extra HTML markup to act as ‘CSS hooks’. It doesn’t rely on a set width box, doesn’t require JavaScript. Spanky corners can have (practically) any radius with no significant increase to file size. It requires only 4 small GIFs.

CSS: Smart Corners While several solutions exist for making round corners on boxes, most I feel just aren’t simple enough. Some use JavaScript — which is fine — and others use CSS with no images. This method uses CSS and small images. Of all the methods, this is the most practical solution.

Learn CSS Positioning in Ten Steps. This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.

A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It’s a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what’s ahead.

CSS image replacement for submit buttons Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input. And since button borders are erased, it’s also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users. This works in all the browsers in which image replacement works: Firefox/Mozilla, IE 5/6, Opera 7/8, Konqueror 3.4 & Safari.

Cool CSS Image Pop-up is a modification of the effect discovered at www.stunicholls.myby.co.uk . This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but this one uses only CSS. When you hover your mouse over the thumbnail the larger image appears beside it. Move your mouse off the thumbnail image to pop-down the enlarged image.  The large image is already displayed at 1px by 1px then "pops up" on mouse over.

CSS Image Maps. If you’re looking for an easier way of creating image maps involving a single image, you may be interested in reading this article.

Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS. Stylegala aims to promote, discuss and inspire the fast and furious web audience in the area of design, CSS and web standards – combined. Stylegala aims to engage you as a visitor to learn more about the technologies and how they can help you build better web sites. Here you can find a collection of techniques, such as @import hack lots of ways to do @import hacks, with corresponding browser support; Alternate Stylesheet Hack – Hide files from Mozilla, Safari and Konqueror 3, AntiNavFourSelectors – hide single rule sets from Netscape 4, Backslash hack – hide styles for IE5/mac, Band Pass Filter – feed rules to Internet Explorer 5 for Mac only,  CSS Filters – the biggest and best site CSS hacks and filters, and many others.

CSS Graphs Helper for Ruby on Rails A Ruby on Rails helper for making simple graphs. The graphs use only CSS/HTML (and an optional gradient image). Vertical bar graphs, horizontal bar graphs, and complex bar graphs with an image marker.

FooterStick. Find out how to force the footer of a webpage to stick to the bottom of the viewport. This is a pretty advanced CSS method and requires that you know a bit about how CSS works.This technique does not work in pre-Tiger versions of Safari or IE for the Mac.  Some versions of Opera do not redraw the footer on the fly like other browsers so you will have to reload the page after manual resizing.

CSS Frames One of the arguments for using frames has always been that they allow you to keep parts of the layout on-screen at all times. This can be emulated with CSS, as described here. This results in much better usability than normal frames, but there are still some potential problems you need to be aware of. For a longer discussion on frames and usability, read my article Who framed the web: Frames and usability.

Drop shadows make page objects appear to "stand out" from the rest of the content, and they have been employed in print design for ages, where the shadows are typically designed into the page template directly. Once a good looking shadow is created the printer’s job is done, but what about the flexible web we work with? The web pages are not rigid templates, but are instead changeable, via screen resolutions, window widths, system defaults, and user preferences as well. No printer is ever faced with these kinds of drop shadow difficulties, but we are, so we have to be just that much more inventive in our methods if we are to give clients what they demand.

2-col tableless layout. Sometimes you may need two columns of the same height in your layout. If the height of their content differs, their backgrounds should flow and end at the same position. This is exactly how columns were made by tables. There are several ways to make two columns in CSS. You can use one floating block, both blocks floating, one block positioned into other’s margin etc. Anyway, every time the block ends where its content ends. That’s OK — in fact, the "same-height columns" is just a design illusion: not the columns, but the background under them makes the effect. Thus, let’s make the columns of their own height and then just play with the background.

Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements. And  in what might be another world-first for brothercake – dbx is fully accessible to the keyboard as well as the mouse, an action I’ve re-dubbed press ‘n’ push. The script works in Opera 7.5 or later, Firefox and other Mozilla browsers, Safari 1.2 or later, Konqueror 3.2 or later, and Internet Explorer 6 (with javascript enabled). The position and state of each box is recorded to a cookie whenever it changes, and re-applied on subsequent page views, so the script’s primary use is as a self-persisting behavioral add-on for web sites, intranets or web-applications, wherever this kind of functionality is required. But over and above that, events and data from the script are reported to a set of API functions, which allow for easy integration into more complex systems – such as using the dragable elements as a data-input interface. In conjunction with remote procedure call scripting (such as XMLHttpRequest) you could use the interface as a controller to virtually any client- or server-side application: site-navigation, games, CMS or forum administration areas, server management CPs, webmail interfaces … the possibilities are endless.

CSS Curves Take a look at this tutorial – how to use textual curves in your design.

CSS Cursors. Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS. Although the cursors will not have the customized look in other browsers it usually doesn’t ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all.  So unless the page really doesn’t work without the customized cursor there shouldn’t be technical reasons for choosing not to. However there might be other reasons for thinking twice before adding custom cursor to your pages. Many users are easily confused or irritated when a site breaks the standard user interface.

CSS for Bar Graphs are some interesting visualizations which were coded in XHTML and CSS. The method that was used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. It was tested in Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1). You can find here code for Basic CSS Bar Graph. Its concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph. Complex CSS Bar Graph  is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.In Vertical CSS Bar Graph the same principle was utilized vertically and reproduced multiple times to create a more complex graph. This particular solution is a relief the to  engineers as all they had to do was calculate percentages, and the look of the graph was much better than their stock graphing component.

HTML Email Guide contains tips and tools on how to create compatible HTML email which will display correctly on most webmail and email clients. HTML email or HTML newsletters have advantages and disadvantages. But your clients (recipients) decide if you will send them a HTML email or a plain text email. For example if they specifically sign up for a HTML newsletter.

CSS Constants. One feature designers often wished they had with style sheets are constants – the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques how to achieve that and discusses their pros and cons. When reading CSS related forums or mailing lists, you’ll sooner or later find someone asking how they can define a "constant" in CSS – something to define once in the CSS document and reuse throughout it. There are several reasons why there are no constants in CSS:

• The CSS specifications didn’t plan for any constants, variables, loops or conditions simply because CSS is there to describe the visual presentation of a document, not programming logic. The same applies to HTML – there are no variables, constants, loops and conditions – its job is to describe what a certain text is, in this document, regardless of what variables were sent to it.
• CSS is "executed" on the client – the browser. Browsers on slower computers already have problems rendering CSS properly. Fixed positioning and big background graphics can cause delays and flickering – what would happen if they had to process the "CSS logic" on top of that?
• Any scripting on the client side is, however low, a security threat and allows for exploits. Microsoft Internet Explorer’s ability to embed Javascript in CSS files proved that.
• However, CSS constants could be something very handy indeed. CSS constants would make it easier to turn style guides into CSS and allow for smaller style sheet documents without much repetition. You define the colours once and add the constant name every time you want to use it.

Collapsible tables with DOM and CSS. You can check the script and the CSS to see how it is done. The script uses old school DOM1 event calls and hijacks the onload handler, therefore you cannot use it with other scripts, this was done as this is a demo of a functionality idea.

CSS “Bullet-Proof” Rounded Corners. The examples include relative positioning, absolute positioning, fixed positioning, and static positioning, as well as floated and centered divs. Any “bullet-proof” cornering method needs to work in all of these situations. If you have one method for one situation and another for different situation, it’s kind of a pain.

CSS – Beautifully Numbered Lists are made by using dl, dt and dd tags inside a ol li structure. Some snappy CSS later, plus some IE 5/5.5/6.0 hackz and you have a beautiful css list. Check out for more details. The code is available.