Office 2007 Pro A List Apart Articles Prettier A

[buisness5119]

It can be time consuming to produce web types both really and accessible. Particularly, laying out types where the sort label and input are horizontally adjacent, as from the image under,Windows 7 Activation Key, can be a serious condition. We employed to implement tables, which worked properly on this scenario—but kinds don’t constitute tabular data, so it’s a semantic faux pas. I’ve tried to make a form-styling solution that is each accessible and portable (while in the sense that I can move the code from one project to the next). Floats have often provided a solution to my predicament, but given the complexity of some layouts and the numerous float bugs associated with World wide web Explorer, it’s not always easy to reuse a float solution. I wanted to make something that anyone could easily reuse on any project: a style sheet that, when utilized to a correctly marked up HTML type, would develop the basis of the required layout. So here it is—my attempt at portable, accessible types. Marking up the kind The most important part of a kind is the HTML we use to build it. Fortunately,Windows 7 Enterprise Product Key, HTML gives us a nice assortment of tags to build our kinds in an accessible way. These are fieldset, legend, and label. If you are unfamiliar with these tags, here’s a brief overview: fieldset and legend The fieldset element allows us to group form controls into logical, related “chunks.” legend then allows us to add a caption to that fieldset, which helps users understand the context of the form controls contained inside that fieldset. In some screen readers, the legend is associated with just about every form control in a fieldset and is read out after just about every tab of the keyboard, so that a individual control can always be referenced back to its legend. label The label element is used to associate information with a specific kind control, whilst also enforcing a code-level association between sort control information and the control element itself. Let’s look at a simple fieldset example (line wraps marked » -Ed.): <fieldset> <legend>Delivery Details<legend> <ol> <li> <label for="name">Name<em>*<em><label> <input id="name" > <li> <li> <label for="address1">Address<em>*<em><label> <input id="address1" > <li> <li> <label for="address2">Address 2<label> <input id="address2" > <li> <li> <label for="town-city">TownCity<label> <input id="town-city" > <li> <li> <label for="county">County<em>*<em><label> <input id="county" > <li> <li> <label for="postcode">Postcode<em>*<em><label> <input id="postcode" > <li> <li> <fieldset> <legend>Is this address also your invoice »
address?<em>*<em><legend> <label><input type="radio" »
name="invoice-address" > Yes<label> <label><input type="radio" »
name="invoice-address" > No<label> <fieldset> <li> <ol>
<fieldset> The HTML is reasonably simple, but you will notice a few things within the structure. I’m using an ordered list (ol) inside of the main fieldset. I’m doing this for two reasons: I can use each list item (li) as a container for each and every row during the form, which is handy for styling. It is, in my opinion, semantically appropriate (i.e. a list of kind controls in some sort of logical order). Additionally, the ol provides additional information for some screen readers that announce the number of list-items when they first encounter the list. Fields that have two or more control options are nested inside an additional fieldset. This logically groups the control options, as discussed above, and the legend acts as a caption for every single option in (in our case, radio inputs). Every option is then wrapped inside its own label tag. This is the most available approach, and genuinely aids users of assistive technologies. Styling the form The styling of the kind is the fun part. My aim was to provide a main forms style sheet that can be imported to give a kind the basic structural styling we need. Here it is. type.cmxform fieldset margin-bottom: 10px;
kind.cmxform legend padding: 0 2px; font-weight: bold;
type.cmxform label display: inline-block; line-height: 1.8; vertical-align: top;
sort.cmxform fieldset ol margin: 0; padding: 0;
form.cmxform fieldset li list-style: none; padding: 5px; margin: 0;
kind.cmxform fieldset fieldset border: none; margin: 3px 0 0;
kind.cmxform fieldset fieldset legend padding: 0 0 5px; font-weight: normal;
form.cmxform fieldset fieldset label display: block; width: auto;
type.cmxform em font-weight: bold; font-style: normal; color: #f00;
sort.cmxform label width: 120px; * Width of labels *
type.cmxform fieldset fieldset label margin-left: 123px; * Width plus 3 (html space) * As you can see, the styles are quite basic; those with a keen eye will notice the display property set to “inline-block” on the labels. If you are unfamiliar with “inline-block,” here’s an explanation from the W3C internet page: This value causes an element to make a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. This is the magic, and the good news is that it works in Web-based Explorer for the two Windows and Mac. If you are tempted to utilize this value in other scenarios, I must point out that in Online Explorer for Windows, it only works on elements that have a default display of “inline,” which a label does. The bad news, however, is that Mozilla-based browsers (Firefox, Netscape, etc.) do not directly support this property, but we can fix it, and I’ll come to that shortly. So, these are the core styles required to give the sort its most basic appearance. I wanted to create a style sheet that contains basic form styles that act as part of a larger library of reusable style rules. In theory, they would not need to be modified by an author, but could simply be included in any internet site to set the baseline rules. (This core set of kind styles is the first part of my vision for creating a library of style sheets that handle the common CSS conundrums.) The best part is that authors who want to modify something like the width of the label elements, can easily overwrite the default further down inside the cascade or with a more specific selector. And to truly customize every single kind, you can add your own styles in a separate style sheet like I have done in this “pretty” type example. Bugs As I mentioned above, users of Mozilla-based browsers won’t see what all the fuss is about. Unfortunately, Mozilla does not currently support the “inline-block” display sort, which is actually a bit of a difficulty. However, Mozilla has a browser-specific display value, “-moz-inline-box”, which acts, for the most part, like “inline-block.” The dilemma with this value is that if you have a in reality long label,Windows 7 Product Key, the text disappears beneath the adjacent type control. Text does not wrap within an element displayed as “-moz-inline-box.” But if we spot the label text within an element displayed as “block” within the “-moz-inline-box” element and give it a width, it behaves as it should. Adding all that by hand into the document is going to mess up our nice, lean, mean HTML —plus we can decide to change the sort layout later, and who wants the extra markup in there? Luckily, there’s an easy way to fix this using JavaScript and the DOM (line wraps marked » -Ed.): if( document.addEventListener ) »
document.addEventListener( 'DOMContentLoaded', cmxform, false); function cmxform(){ Hide forms $( 'form.cmxform' ).hide().end(); Processing $( 'form.cmxform' ).find( 'lilabel' ).not( '.nocmx' ) »
.each( function( i )var labelContent = this.innerHTML; var labelWidth = document.defaultView. »
getComputedStyle( this, '' ).getPropertyValue( 'width' ); var labelSpan = document.createElement( 'span' ); labelSpan.style.display = 'block'; labelSpan.style.width = labelWidth; labelSpan.innerHTML = labelContent; this.style.display = '-moz-inline-box'; this.innerHTML = null; this.appendChild( labelSpan ); ).end(); Show sorts $( 'form.cmxform' ).show().end();
} The JavaScript uses the wonderful JQuery library (which also, obviously, needs to be included) to simplify the processing. I will briefly explain how this works. Firstly, I hide any type that uses the “cmxform” class. Hide sorts
$( 'form.cmxform' ).hide().end(); We do this because otherwise the user may well see the form “fixing” itself as it renders while in the page, which can look a bit strange. Secondly, using the JQuery methods and a combination of CSS selectors and XPath, I collect all labels that are a direct descendant of an li, that do not have a class of “nocmx”. $( 'form.cmxform' ).find( 'lilabel' ).not( '.nocmx' ) »
.each( function( i ){
... The reason I use the “nocmx” filter is so that users can add that class to labels that require a different styling. This can be very useful, as I have discovered from using this method for a while. Then, for each collected label, a span is created inside to fix the “inline-block” problem. $( 'form.cmxform' ).find( 'lilabel' ).not( '.nocmx' ) »
.each( function( i )... Finally, all the originally hidden kinds are crafted visible again, and everything looks sweet. Show types
$( 'form.cmxform' ).show().end(); Note: I’m using the Mozilla-specific document.addEventListener() method to launch the script. This honestly is ideal, as it only runs for Mozilla (which is all we need) and it launches as soon as the DOM has been loaded. Although JavaScript might possibly not appear the most elegant solution, it is completely unobtrusive and, when JavaScript is disabled, the type degrades gracefully. There’s also a small amount of tidying up to do in Web Explorer though. For Windows, we need to tweak the positioning of the legend@s so they line up neatly. This are usually achieved by giving the @legend a negative leftright margin as shown under: kind.cmxform legend padding: 0 2px; font-weight: bold; _margin: 0 -7px; * IE Win * For IE5Mac,Office 2007 Pro, we need to tweak the display of the legend, to fix an odd display bug, by adding the following: *\**
sort.cmxform legend display: inline-block;
* IE Mac legend fix * This rule allows us to supply a rule especially to World wide web Explorer for Mac. If you are uncomfortable in using browser specific rules in this particular way, feel free to remove them. You could add these fixes to browser-specific style sheets, but I wanted this technique to be as portable as possible, so all the styles are in one area. Finishing up We’re done. All you need to do is include the relevant “cmxform” files and then add the class of “cmxform” to any kind you need to. (If you are wondering where the name “cmxform” came from, it’s there because I developed this technique whilst working for Cimex Media in London.) Enjoy! Note: This type technique has been tested with Safari 2.0.3, Firefox 1.5, Opera 8.5, Net Explorer 7b2 , World wide web Explorer 6, The web Explorer 5 (Windows), Online Explorer 5.2 (Macintosh),Office 2010 Professional Plus, Netscape 7.2 (Macintosh), and Netscape 8.1 (Windows).