Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt

50 924 0
  • Loading ...
1/50 trang

Thông tin tài liệu

Ngày đăng: 26/01/2014, 14:20

InternationalizationInternationalization—sometimes abbreviated as i18n—“the letter i, 18 other letters, andthe letter n” —is the practice of making content available in a variety of languages, notsimply one. With a truly worldwide World Wide Web, the standards that are used on theWeb simply can’t support only the English language. The Cascading Style Sheets lan-guage has been partially internationalized, which means it can be used, with varyingdegrees of success, with many languages and local variants.On the Web, languages are indicated by a two-letter code, sometimes followed by a dashand an additional country code for regional versions of a language. Some of these lan-guages are shown in Table 21.6; for a complete list, see http://www.cssin24hours.com/21/lang.html.TABLE 21.6 Several Language CodesCode Languagede Germanen Englishen-ca Canadian Englishen-uk British Englishen-us American Englishfr Frenchjp Japaneseru RussianThe choice of language can dictate a number of factors, including the direction of thetext, the fonts used, or even the dictionary for pronunciation used by a screenreader. TheCSS language doesn’t allow you to set the language, which must be done in the HTMLor in an HTTP header, but it does let you create rules or style sheets that apply only tocertain languages.To set the language within an HTML document, you simply have to use the langattribute on the <html> tag. Sections of a second language embedded within the docu-ment can be indicated with the lang attribute on a <span> or any other appropriateHTML element, such as <blockquote> or <div>.382 Hour 2127 0672324091 ch21 6/13/02 10:38 AM Page 382Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.The :lang() Pseudo-classThe CSS Level 2 specification defines a special pseudoclass, :lang(),for indicatingrules that should be applied only to elements that match a certain language. Such a ruleis written like the following::lang(en-uk) { background-color: #CCCCFF; }This would display anything written in British English with a light blue backgroundcolor. How does the browser know which parts of the text are written in British English?It needs to be set in the HTML, like the following:<p>He cried out in a bad Monty Python imitation,<span lang=”en-uk”>He’s pinin’ for the fjords!</span></p>By itself, :lang() is not particularly useful, but when combined with other CSS rulesand properties, it can be quite powerful. Some of those that involve generated contentwill be discussed in the next hour.List MarkersOne way in which :lang() rules can be used is to set an appropriate marker for orderedlists. You’ll recall that you can set the list marker to count using Roman numerals, num-bers, or letters, but what about languages that don’t use the same alphabet? A list of addi-tional values for the list-style-type property is shown in Table 21.7.TABLE 21.7 International Values for the list-style-type PropertyValue Effectarmenian Traditional Armenian numberscjk-ideographic Ideographic numbers (Asian languages)georgian Traditional Georgian numbershebrew Traditional Hebrew numbershiragana Japanese hiragana numbershiragana-iroha Japanese hiragana-iroha numberskatakana Japanese katakana numberskatakana-iroha Japanese katakana-iroha numberslower-greek Lowercase Greek lettersAccessibility and Internationalization 3832127 0672324091 ch21 6/13/02 10:38 AM Page 383Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.You don’t have to use a :lang() selector to utilize these values; you could use a normalelement selector, a class or id selector, or anything else that fits your markup. Here aretwo examples:li:lang(jp) { list-style-type: hiragana; }ul.alphabeta { list-style-type: lower-greek; }384 Hour 21These are supported only for those browsers and operating systems thatsupport these character sets and appropriate fonts. This is highly dependentupon the specific version and language support on each computer. Althoughyou should feel free to use these with content in the appropriate language,you should also expect that browsers without support for such a given lan-guage will display these as list-style-type: decimal.Bidirectional TextMost languages are read in one direction—left to right, as in English, or right to left.Some languages, such as Arabic or Hebrew, sometimes mix text direction within thesame document; this is called bidirectional text (bidi for short). In most cases, thebrowser will have enough information to determine the direction based on the charactersused and the language settings.Two CSS properties,direction and unicode-bidi,are used to affect the calculation ofthe correct direction. In most cases, you won’t need to use these properties, but if youfind yourself needing to change the direction of text, you first use the unicode-bidiproperty to create an additional level of embedding or to set up an override. Then thevalue of direction can be set to either ltr (left-to-right) or rtl (right-to-left). For moredetails, see the CSS Level 2 specification. Browsers are not required to support changingdirection of HTML text using these properties.SummaryUsers with disabilities are as entitled to use the Web as anyone else, but often they areunable to access sites due to careless Web design. Using Cascading Style Sheets is anexcellent first step toward developing a site that can be used by everyone, as style sheetsseparate presentation from content.Assistive technology devices and software can often enable access by disabled users, butonly if sites are designed in accordance with Web accessibility standards. The W3C hasproduced Web Content Accessibility Guidelines that are an invaluable resource for Web27 0672324091 ch21 6/13/02 10:38 AM Page 384Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.developers and that form the basis of the U.S. government’s Section 508 regulations forfederal agency sites.Aural CSS properties let you determine qualities of the voice used to read content outloud, such as the pitch, speed, and “family” of the voice. Unfortunately, almost nobrowsers support aural CSS currently, thus limiting its usefulness.In addition to users with disabilities, users in non-English-speaking countries also use theWeb. CSS is designed with internationalization in mind; for example, rules can be madefor specific languages with the :lang() pseudo-element, and the list-style-type prop-erty can produce a number of non-English number markers.Browser Support Report CardCSS Feature Grade NotesAll Aural CSS properties C- No mainstream browser support:lang() pseudo-class selectors C Variable supportInternational list markers C Variable supportBidirectional text n/a Avoid changing text directionQ&AQ Is Section 508 the same as the Americans with Disabilities Act (ADA)? Whatare the ADA requirements for Web accessibility?A Section 508 and the ADA are different sets of regulations. Section 508 appliesonly to federal agencies, whereas the ADA is applicable to a number of privateand public sector entities. Unlike Section 508, the ADA contains no formal regu-lations for Web accessibility; however, the ADA requires organizations to avoiddiscrimination on the basis of disability when providing services. For detailedcommentary on legal requirements for accessibility, see Cynthia Waddell’s essayson the Web site of the International Center for Disability Resources on theInternet (http://www.icdri.org/).Q Can tables be made accessible? Frames? JavaScript? Java? Flash? PDF?A Yes. Tables and frames can be made accessible by using HTML markup carefullyand by providing additional attributes or elements, such as <noframes>. If a certaintechnology or file format can’t be directly made accessible, the content within it canbe presented in an alternate, accessible format, such as a transcript or HTML version.Accessibility and Internationalization 3852127 0672324091 ch21 6/13/02 10:38 AM Page 385Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.WorkshopThe workshop contains quiz questions and activities to help reinforce what you’ve learnedin this hour. If you get stuck, the answers to the quiz can be found after the questions.Quiz1. Do the Web Content Accessibility Guidelines suggest that color should be avoidedin Web design?2. Which of the following is NOT an aural CSS property?(a.)voice-family(b.) stress(c.) accent(d.) speak-numeral3. How would you write a CSS rule to make all ordered lists written in French dis-play a numeric marker that counts in Greek letters?Answers1. No. This is a common misunderstanding; the restriction is on using color as theonly way to convey information. If you also provide that information in the HTMLtags or the text content, your colors are not a problem at all.2. (c.) There is no accent property in CSS.3. Here is one way to write such a rule:ol:lang(fr) { list-style-item: lower-greek; }ActivityExpand your skills with Web development by learning more about Web accessibility.Here are some sites you can visit to get started:•Test your site’s accessibility at the Center for Applied Special Technology usingBobby (http://www.cast.org/bobby/).•Web Accessibility in Mind (http://www.webaim.org/) has tutorials and mailinglists for understanding Web accessibility issues.•Download the free A-Prompt program for Windows computers from the Universityof Toronto (http://aprompt.snow.utoronto.ca/). A-Prompt interactively locatesWeb accessibility errors and corrects them for you.•The HTML Writers Guild’s AWARE Center (http://www.awarecenter.org/) fea-tures essays and online courses in Web accessibility.386 Hour 2127 0672324091 ch21 6/13/02 10:38 AM Page 386Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.HOUR22User Interface andGenerated ContentThe CSS properties defined in the Cascading Style Sheets Level 2 specifica-tion allow you to do more than simply place and present content. Specificproperties also allow you to directly shape the user’s experience through inter-action with the operating system and browser; other properties let you add tothe content of the page to build an appropriate presentation for the user.In this hour, you’ll learn•How you can change the appearance of the mouse pointer•Which properties allow you to create outlines, and how an outline isdifferent from a border•How to use the system colors and fonts in your design, and why you’dwant to in the first place•How you can add additional content to a page, before or after specificelements•Which properties let you control the appearance of quotation marks•How counters and markers can be used to automatically number listsand other elements28 0672324091 ch22 6/13/02 10:34 AM Page 387Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.User Interface PropertiesThe user interface (UI) of a computer program is the part that interacts with the personusing the program. This interaction includes not only the visual output, but also themethod of providing information to the program via mouse, keyboard, or other inputdevice.When talking about Web content, there are several layers of user interface we’re dealingwith. The operating system—be it various versions of Windows, Mac OS, Linux runningXWindows, and so on—provides a basic graphical user interface (GUI) layer, which cre-ates the windows, menus, and boxes onscreen. The browser’s user interface is built uponthe operating system’s UI and generally is designed to mesh with the operating systemwhile adding appropriate controls for Web surfing. A third layer of user interface is createdby the content itself; a Web page can be thought of as a UI for the information contained inthe markup.CSS Level 2 has several user interface properties that we’ll examine in this part of thehour. These are not enough to fully control all interactions with the user, but they doallow you to alter some UI components and use information provided by the operatingsystem to style the page.Changing the Cursor AppearanceA key part of the Web-user experience is showing what part of the GUI is currently beingpointed to by a pointing device, such as a mouse. The mouse cursor could be controlledby a mouse or by another method, such as a track-ball, a joystick, or a virtual mouse viathe keyboard, for people who can’t operate a normal mouse. For users with extreme dis-abilities, mouse control can be approximated by pointer wands attached to the head, oreven by eye-tracking sensors.A mouse cursor is applicable only in certain contexts; in print or Braille, for example,there is no mouse cursor. The mouse cursor is disabled or ignored by screenreaders forblind users, and it’s also inapplicable for kiosk systems with touch panels or for smalldevices with touch screens, such as Palm or Pocket PC organizers.It’s important to keep in mind that a mouse cursor is just an indicator of potential actionand not necessarily a choice that’s been acted on; the cursor’s location corresponds to the:hover pseudo-class in CSS, not to the :active or :focus pseudo-classes.The CSS property cursor can be used to change the appearance of the mouse cursor;this change occurs whenever the mouse cursor is over the part of the page display corre-sponding to the display rule’s selector. Because :hover is implied, it’s not necessary touse that pseudo-class with the selector.388 Hour 2228 0672324091 ch22 6/13/02 10:34 AM Page 388Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.A cursor rule is written like this:selector { cursor: cursor-type; }The values that can be assigned to the cursor property are shown in Table 22.1. Thedefault value is auto, and if this value is set on a containing box, it will be inherited bythat box’s children elements.TABLE 22.1 Values for the cursor PropertyValue Effectauto Lets the browser decide the shape of the cursorcrosshair Displays a crosshair cursordefault Displays the default cursor (usually an arrow)e-resize Indicates that the object can be resized “eastward”help Displays a help-available cursor (usually a question mark)move Indicates a movable object’s cursor (usually crossed arrows)n-resize Indicates that the object can be resized “northward”ne-resize Indicates that the object can be diagonally resized to the northeastnw-resize Indicates that the object can be diagonally resized to the northwestpointer Displays a link pointer cursor (usually a pointing hand)s-resize Indicates that the object can be resized “southward”se-resize Indicates that the object can be diagonally resized to the southeastsw-resize Indicates that the object can be diagonally resized to the southwesttext Displays a text editing cursor (usually an I-shaped bar)wait Displays a waiting cursor (usually an hourglass)w-resize Indicates the object can be resized “westward”url(address) Displays a cursor image from a given URLinherit Uses the cursor value for the containing boxThe url() value is written in a special format; you can write as many url() values asyou like, and the browser will display the first one it is able to load and understand.After the last url() value, you should provide a “generic” cursor value from the list inTable 22.1, in case the url() cursors can’t be displayed; for example, if the file formatisn’t understood by the browser. The concept of a generic default is similar to that of thefont-family property and so should be familiar to you.As there is not a universal format for cursor files, you should provide cursor images inseveral file formats using multiple url() values. For example, give a version of theUser Interface and Generated Content 3892228 0672324091 ch22 6/13/02 10:34 AM Page 389Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.cursor in .tiff, .cur, and .gif formats, in addition to supplying a generic value. Cursorimages should usually be small—no more than around 40 by 40 pixels, and usuallyaround 16 by 16.390 Hour 22Warnings for Opera, Internet Explorer 5, Internet Explorer(Mac), Netscape 4, and Netscape 6Only Internet Explorer 6 for Windows supports the url() method for speci-fying a cursor image, so be sure to provide a backup cursor type as youwould for fonts. Current versions of Opera don’t allow you to change thecursor appearance using CSS, nor does Netscape 4.Listing 22.1 is an HTML file that demonstrates the various cursors available in CSS. Youcan test these out yourself at http://www.CSSin24hours.com/22/cursors-22.1.htmland see how your operating system and browser display each cursor type.LISTING 22.1 The Different Styles of Cursors<! cursors-22.1.html ><html><head><title>Changing Cursors</title><style type=”text/css”>h3 { margin: 0.5em; padding: 0.25em;text-align: center;background-color: silver; color: black; }</style></head><body><table width=”100%”><tr><td valign=”top”><h3 style=”cursor: crosshair;”>Crosshair</h3><h3 style=”cursor: default;”>Default</h3><h3 style=”cursor: help;”>Help</h3><h3 style=”cursor: move;”>Move</h3><h3 style=”cursor: pointer;”>Pointer</h3><h3 style=”cursor: text;”>Text</h3><h3 style=”cursor: wait;”>Wait</h3><h3 style=”cursor: url(‘maus.cur’),url(‘maus.tiff’),url(‘maus.gif’), auto;”>URL</a></td><td valign=”top”><h3 style=”cursor: n-resize;”>North</h3><h3 style=”cursor: s-resize;”>South</h3><h3 style=”cursor: e-resize;”>East</h3>28 0672324091 ch22 6/13/02 10:34 AM Page 390Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.<h3 style=”cursor: w-resize;”>West</h3><h3 style=”cursor: nw-resize;”>Northwest</h3><h3 style=”cursor: ne-resize;”>Northeast</h3><h3 style=”cursor: sw-resize;”>Southwest</h3><h3 style=”cursor: se-resize;”>Southeast</h3></td></tr></table></body></html>The screenshot in Figure 22.1 is actually a composite of several screenshots; obviously,only one cursor can usually be displayed at a time, so I’ve combined images together toshow you how one browser displays these cursors.User Interface and Generated Content 39122FIGURE 22.1Internet Explorer 6 on Windows displaysvarious cursors.Now you know how to change the cursor, but why would you want to? Inmost cases, the style of the cursor is automatically set to something sensibleby the Web browser, and it actually serves as a useful cue to the user. Apointer finger cursor, for example, lets the user know that they are over alink. In general, you should change the cursor appearance only if you’ve gota very good reason. For example, if you’ve used JavaScript to create aDynamic HTML effect that lets you move something onscreen, you couldchange the cursor to indicate this. If you’re using graphics for cursors, don’tjust set one for the whole page; create different graphics for links and inputfields, and write appropriate rules to call them.LISTING 22.1 Continued28 0672324091 ch22 6/13/02 10:34 AM Page 391Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.[...]... counter(name, marker-style) Inserts a counter’s value counters(name, string) Inserts a counter’s value and a string counters(name, string, marker-style) Inserts a counter’s value and a string no-close-quote Suppresses the printing of a closing quote mark no-open-quote Suppresses the printing of an opening quote mark open-quote Inserts an appropriate opening quote mark url(address) Inserts the contents of... but within a Web browser Scripts can be written that produce a wide variety of effects, from validating form input to creating animation The ones we are most concerned with in this hour are those that interact with CSS setting styles, hiding or displaying content, or positioning elements on the screen CSS and JavaScript As a programming language, JavaScript has a different feel than either CSS or HTML... this hour will show you how to use it with CSS styles Some example scripts in this hour will show you specific cases of JavaScript and style sheets working together to produce the end result In fact, there are several good books about JavaScript If you like the Sams Teach Yourself approach to learning, you’ll want to pick up Sams Teach Yourself JavaScript in 24 Hours, written by Michael G Moncur (ISBN... users in the long run Creating Content In CSS terminology, generated content consists of text or images that aren’t present in the HTML markup but are added through CSS rules The ability to generate content allows for even more flexibility in designing style sheets and alternate style sheets that effectively convey the information of the page to the user In overview, generating content depends on using... set CSS property values All of the following examples can be accessed on the Web at http://www.cssin24hours.com/23/ JavaScript and Dynamic Styles The first example of using JavaScript with CSS can be seen in Listing 23.2, which allows the user to select a theme, and then displays text using that theme A theme is simply a collection of styles CSS and JavaScript LISTING 23.2 415 A Theme Picker in JavaScript... example of counters in a style sheet can be seen in Listing 22.5 This example counts books within a series and the total numbers of books from our HTML Tolkien book list LISTING 22.5 Style Sheet for Adding Counters to the Book List margin-top: 1em; /* generated-22.5 .css */ h1:after { content: “: author index”; } div { quotes: “``” “‘’”; } continues 22 402 Hour 22 LISTING 22.5 Continued div[title] {... 22 Creating Outlines An outline is a visual line surrounding an element This sounds similar to a border, doesn’t it? Unlike a border, an outline doesn’t actually take up any space in the box model Instead, it’s laid over other elements The outline is placed just outside of the border, and thus it will be displayed over the margin or even over other content if the margin is small and the outline is wide... example) You can see this in action in Figure 23.2 or by accessing the page via the Web at http://www.cssin24hours.com/23/ picker-23.2.html CSS and JavaScript 417 FIGURE 23.2 Choosing a theme changes the page dynamically in Netscape 6 23 JavaScript and Visibility In Hour 13, “Borders and Boxes,” you learned about the visibility property, which lets you designate certain CSS boxes as visible or hidden... The text color in a caption GrayText The text color for disabled options (grayed out) Highlight The background color for selected items HighlightText The text color for selected items InactiveBorder The border color around an inactive window InactiveCaption The background color of the caption on an inactive window InactiveCaptionText The text color of the caption on an inactive window InfoBackground... the outline is set with the outline-width, outline-style, and outline-color properties, or an outline shorthand property that sets all of them at once The outline-width property can take the same types of values as the border-width property; the outline-style can accept border-style properties The outline-color value can be any normal color value, or invert, which means the outline is displayed in the . Suppresses the printing of a closing quote markno-open-quote Suppresses the printing of an opening quote markopen-quote Inserts an appropriate opening quote. selected itemsInactiveBorder The border color around an inactive windowInactiveCaption The background color of the caption on an inactive windowInactiveCaptionText
- Xem thêm -

Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt

Từ khóa liên quan

Mục lục

Xem thêm

Gợi ý tài liệu liên quan cho bạn