Progressive Enhancement Techniques 1: the HTML. In my earlier articles, we discussed progressive enhancement and why it’s generally a better choice than graceful degradation. This is the first of a three-part series that illustrates how to build a simple tabbed box using progressive enhancement techniques. Web Page Layers Web pages are built in three layers: HTML defines the document content and structureCSS defines the layout and styling — it enhances the HTMLJavaScript defines page functionality such as client-side form validation, animations and effects — it can enhance both the HTML and CSS HTML is the only layer you can rely on with any certainty.
The majority of browsers offer CSS but the level of support varies. Finally, JavaScript is the least reliable technology layer. POSH Content POSH is an acronym for “Plain Old Semantic HTML”. In the following example, we will build a tab box. Building the Tab Box HTML At it’s most basic level, a tabbed box is a list of in-page links to associated content. <! Resource links: Related reading: Working with Multiple Style Sheets.
Working with Multiple Style Sheets(Page 1 of 4 ) Definitely, this level of customization is more evident when visitors are allowed to modify (only partially) the visual appearance of a given web site. This implies the existence behind the scenes of an application that manipulates the CSS styles associated with the web site. Of course there are different approaches that can be used for changing the CSS styles of a specific web site. These range from the modification of a few elements to altering the visual appearance of the entire web document. As you can see, providing users with the capacity for swapping complete style sheets can be quite useful in certain cases, particularly if you're trying to make your web site more customizable and accessible to your visitors.
With the preliminaries already out of the way, let's learn together how to manipulate several style sheets attached to a given web page. Matching Columns for Fixed Web Page Layouts with CSS. Matching Columns for Fixed Web Page Layouts with CSS(Page 1 of 4 ) Introduction If you already read the first article of this series, then it's quite probable that at this point you're very familiar with the CSS-driven technique that I introduced initially, which was aimed at balancing the primary columns of a given web document. As you'll certainly recall from the previous tutorial, the effectiveness of the method in question basically relied upon creating a general wrapping DIV, which contained all the columns that needed to be leveled.
Of course, if you're a seasoned web designer who works frequently with complex web page layouts and advanced browser hacks, then you may find this CSS-based approach rather basic. However, for web designers taking their first steps into the exciting area of DIV-based web page layouts, this technique might be quite attractive due to its easiness and versatility. So, want to take a closer look at this simple yet effective CSS approach?
Manipulating Background Images with CSS. Manipulating Background Images with CSS(Page 1 of 4 ) A downloadable zip file for this article is available here. Introduction If you're a web designer who's making the first steps into this fascinating terrain, perhaps you already started applying some of the most popular concepts present in the creation of modern web sites. More than likely you've already built table-less page layouts, created compact, high-maintainable CSS styles, and coded unobtrusive JavaScript routines. Yes, definitely it must be admitted that learning these three pillars of top-notch web development help in the construction of truly professional web sites, even when this process, as everything in life, takes time to master.
Of course, one of the best things surrounding the development of high-quality web sites is learning to implement those simple yet effective techniques that can turn an arid, text-based web page into a completely different, eye-catching landscape. But, what's the point in mentioning this? 12 Lessons for Those Afraid of CSS and S. When I first encountered Cascading Style Sheets in the autumn of 1998, I was trying to do cool stuff—make this stuff over here move, make that stuff over there change color—and it took another six months before I started using CSS to control presentation rather than behavior.
It took me two years to break out of the comfortable prison of layout tables, and another two years before I could use CSS to produce layouts that were originally intended for tables. Even though I was forced during that time to deal with such anachronistic works of art as Netscape 4.0 and Internet Explorer 5.0 for Windows, the moral of the story should be clear: it took me a long while to achieve genuine mastery of CSS. There are plenty of excellent books and articles out there, including many written by the contributors to this publication. The cries of frustration I hear from other developers about CSS are only an echo of the ones I made for years.
Lesson No. 1: Everything you know is wrong… sort of#section1.