Browser support One of the main features of the CSS tool is that it is graded to provide perfect support for Class A browsers. Rating browser support is purely a Yahoo! rating, and you can see the complete description on its website, which basically describes how CSS behaves well in the browsers on the market today. In this online table, browsers are divided into three levels of browser support (A, C, and X). Level A is the highest level of support. By leveraging the power of modern web standards, the YUI library discovers that a Class A experience delivers advanced functionality and visual fidelity. Support categories and related files give you a sense of where CSS is supported, but it should be available in every browser (with possible downgrades). Reusable CSS The YUI library includes three CSS areas or features, covering formatting, font introduction, and grid-based (column and row) layout. These terms are used on the website to describe these three elements: Page Grids: Allows you to embed grids of one to four columns within the capacity of the template you are using. Page Grids: buildgridsgrids.css Grid page layout Grid-based layout is the driving force behind almost any site design or page layout. In the past, this was often done through HTML tables, but CSS provides tremendous power and flexibility for page layout. Page Grid provides code to build pages with columns and rows according to your requirements. At the most basic level of the page grid, it provides seven Web page templates, six of which define detailed main content/toolbar layouts; the seventh template defines a layout without toolbars, and the main content takes up the entire page width. The names of these templates are as follows: yui-t1: Contains a toolbar with a width of 160px on the left and a main area with a width of 570px. List A <html><head> The layout is given to the entire page - the main div tag is assigned the yui-t2 class. This shows that the second template is used.
Fonts: Provides cross-browser typography standardization and control. In general, it provides consistent fonts and line heights while fully supporting user adjustments to fonts (inside the browser).
Reset: Provides cross-browser standardization of default assignments to HTML elements. It also removes common default expressions in browsers, such as using bold for emphasized elements, to help ensure that all font definitions are intentional and elements are always used for their semantic meaning. Not the customary visual expression.
After being installed, each element of the YUI library download is available in the following directories/files on the web server:
Fonts: buildfontsfonts.css
Reset: build eset eset.css
You can install these base directories on your own web server or place them within your site so you can reference them as needed. An important feature of CSS (besides being free) is that it is thoroughly tested and debugged before it is released. Let's take a closer look at CSS tools in action.
yui-t2: Contains a toolbar with a width of 180px on the left and a main area with a width of 550px.
yui-t3: Contains a toolbar with a width of 300px on the left and a main area with a width of 430px.
yui-t4: Contains a toolbar with a width of 180px on the right and a main area with a width of 550px.
yui-t5: Contains a toolbar with a width of 240px on the right and a main area with a width of 490px.
yui-t6: Contains a toolbar with a width of 300px on the right and a main area with a width of 430px.
yui-t7: Contains a main area with a width of 750px and no toolbars.
You can combine (or edit, if you're brave enough) these templates to suit your purposes. Listing A uses the first layout to layout a page (note: the CSS tool is installed in the default directory of the web server).
<title>Yahoo CSS Tools Example 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">Page Header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Main Area</div>
</div><div class="yui-b">Left Column</div>
</div>
<div id="ft">Page Footer</div>
</div></body></html>
A few notes on the HTML page:
The page is divided into header, body and footer areas. The header is given the identifier hd, the body is bd, and the footer is ft.
The main body of the page is divided into the left area (if the template supports it) and the main area. Both are assigned the yui-b class, but the main area is appended with the yui-main identifier attribute in its div tag.