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.
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.
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.
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.
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
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.
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.
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 background image s (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.
Learn CSS Positioning in Ten Steps. This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.
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.
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
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?
- 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.