Developing Large Web Applications- P11

Developing Large Web Applications- P11:This book presents a number of techniques for applying established practices of goodsoftware engineering to web development—that is, development primarily using thedisparate technologies of HTML, CSS, JavaScript, and server-side scripting languages.Whereas there are many books on how to use languages, how to use libraries, and howto approach software engineering, this is the first book to codify many of the techniquesit presents. These techniques will make the components of your own web applicationsmore reusable, maintainable, and reliable....
Nội dung trích xuất từ tài liệu:
Developing Large Web Applications- P11Example 4-22. CSS for the 2x1 container#con2x1.default{ float: left; width: 750px; overflow: hidden;}#con2x1.default .con2x1pri{ float: left; display: inline; width: 370px; overflow: hidden; margin-right: 10px;}#con2x1.default .con2x1sec{ float: left; width: 370px; overflow: hidden;}#con2x1.minimum{ float: left; width: 310px; overflow: hidden;}#con2x1.minimum .con2x1pri{ float: left; display: inline; width: 150px; overflow: hidden; margin-right: 10px;}#con2x1.minimum .con2x1sec{ float: left; width: 150px; overflow: hidden;}Example 4-23 shows how you could use the default version of the 2x1 container withinthe primary content section of the Results layout presented earlier. From this example,coupled with what we observed in Chapter 3 about constructing an information ar-chitecture to create reusable modules, you can begin to see how a page built from alayout, with containers inserted as needed, and modules inserted into the layout andvarious containers, helps build modular web applications in which components arereusable, maintainable, and reliable. Layouts and Containers | 81Example 4-23. The default version of the 2x1 container within the Results layout ... ... ... ... ... ... ... Other PracticesTo ensure browsers render your presentations in a pixel-perfect manner, use the fol-lowing practices to help write reliable CSS as you develop large web applications. Thegoals of these practices are to establish a consistent platform on which to apply yourstyles and to address inconsistencies with the way browsers render fonts.82 | Chapter 4: Large-Scale CSSBrowser Reset CSSAll browsers provide a default set of styles on which your own styles will be layered.Unfortunately, default styles are inconsistent across various browsers. Without a com-mon starting point on which to layer the application’s own presentation, you end upmaking many more adjustments in CSS for particular browsers to maintain consistency.Fortunately, Yahoo! makes some CSS rules available in its YUI (Yahoo! User Interface)library to reset modern browsers to a consistent set of neutral styles. You can downloadthe library and read its complete documentation at http://developer.yahoo.com/yui. Toapply this CSS, simply add the following link before any CSS of your own: Because it is helpful to see which properties must be reset, Example 4-24 lists the CSS.Alternatively, you can place this CSS directly in your own CSS file to avoid the addi-tional server request with the previous link.Example 4-24. Browser reset CSS from the YUI library/*Copyright (c) 2009, Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txtversion: 2.7.0*/html{ color: #000; background: #FFF;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding: 0;}table{ border-collapse: collapse; border-spacing: 0;}fieldset, img{ border: 0;}address, caption, cite, code, dfn, em, strong, th, var, optgroup{ font-style: inherit; font-weight: inherit;}del, ins Other Practices | 83{ text-decoration: none;}li{ list-style: none;}caption, th{ text-align: left;}h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal;}q:before, q:after{ content: ;}abbr, acronym{ border: 0; font-variant: normal;}sup{ vertical-align: baseline;}sub{ vertical-align: baseline;}legend{ color: #000;}input, button, textarea, select, optgroup, option{ font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}input, button, textarea, select{ *font-size: 100%;}84 | Chapter 4: Large-Scale CSSFont NormalizationThe ways in which browsers render fonts, especially when it comes to font size, are notconsistent. Fortunately, Yahoo! makes CSS available in its YUI library to normalizefonts within the modern browsers. To apply this CSS, add the following link beforeany CSS of your own: Example 4-25 lists the CSS for font normalization. As with the browser reset CSS shownearlier, you can place this CSS directly in your own CSS file to avoid the additionalserver request with the previous link.Example 4-25. Font normalization CSS from the YUI library/*Copyright (c) 2009, Yahoo! Inc. All rights reserve ...