Cascading Style Sheets Tutorial

  Introduction 

  <abbr> Is used for web pages on the short (translator Note: here the acronym and abbreviation separate terms, or scope than initials, the first letter from the acronym used <acronym> Tags) Add the appropriate tagging XHTML label, the Windows IE browser not support <abbr> labels.    In IE, you can be applied to the CSS <acronym> but not applied to <abbr> tag, IE will <acronym> labels title attribute displays a prompt, but it will overlook <abbr> labels. 

  IE bug of this (or features) that makes some websites staff <abbr> tags that are not used, and so that is obviously wrong.    Mozilla and Opera, or very correct dealt with the label, and it for the readability of web content and semantics of is very important.    This is also why I have been looking for a solution, and ultimately I found. 

  Solution 

  The method is based on a simple fact: even if IE will ignore <abbr> tags, but other nested In "abbr> tags, labels or normal.    Therefore, I embedded in a label <span> In "abbr>, set up <span> title and the class attribute, and then became <abbr> and <acronym> tag the same way. 

  Code examples 

  Look at the code below, is a simple example of abbreviations: 

  <abbr Title="Cascading Style Sheets"> CSS </ abbr> 

  Now, compared to the revised code: 

  <abbr Title="Cascading Style Sheets"> <span class="abbr" title="Cascading Style Sheets"> CSS </ span> </ abbr> 

  Automatic operation 

  Manual to every label embedded <abbr> <span> obviously impossible - both silly and the Mozilla and Opera not necessary.    Fortunately, there is now a automatic, based on the client-side scripting solution. 

  You may note, this page (translator Note: The original author pages), even in the abbreviated words, IE will have tips, and add CSS style (virtual underlined with a question mark and the mouse cursor) .    However, if you look at the source code, you will not find in the above-mentioned <span> labels.    This page loaded benefit from a simple JavaScript: 

  Function styleAbbr () ( 
  Var oldBodyText, newBodyText, reg 
  If (isIE) ( 
  OldBodyText = document.body.innerHTML; 
  Reg = / <ABBR([^> ]*)>([^<]*)< \ / ABBR> / g; 
  NewBodyText = oldBodyText.replace (reg, '<ABBR $1> <SPAN class=\"abbr\" $1> $ 2 </ SPAN> </ ABBR>'); 
  Document.body.innerHTML = newBodyText; 
  ) 
  ) 

  Window.onload = function () ( 
  StyleAbbr () 
  ); 

  IsIE = (document.all)? True: false; 

  This script will check the client browser, if it is IE, then the replacement of all <abbr> tag as the revised version (embedded <span ").    Pay attention to is that we must use a regular expression and innerHTML attribute to replace the standard DOM methods, because IE to get through DOM <abbr> attributes. 

  Style of 

  Finally a look at this page on the use of CSS.    Quite simple: 

  Abbr, acronym, span.abbr ( 
  Cursor: help; 
  Border-bottom: 1px dashed # 000; 
  ) 

  Mozilla and Opera and the use of abbr acronym attribute selection, the use of IE and span.abbr acronym.    In any case, <abbr acronym> and <> has been the pattern - a question mark with the mouse cursor (when the mouse on that later) and virtual underlined. 

  Other 

  1. Thank Michael Kusyn provides a JavaScript solution. 
  2. More about <abbr>, <acronym> labels and the distinction between the two, the reference Craig Saila HTML is not an acronym … (Evolt.org) 

  Welcome to exchange views comments can be e-marek@sovavsiti.cz. 

Tags: w3c form w3c detection

Releated Posts

• ASP deal with a form submitted by the Ajax examples
• To: On the Form Web Design
• Form table was to avoid the distraction deformation CSS
• Modification of the United States: CSS borders in the form of aesthetics
• Css form of control by the turn color

This entry was posted on Monday, April 30th, 2007 at 12:00 am and is filed under Xhtml and Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.