Why Hack CSS ?

Why Hack CSS? The theory of Cascading Style Sheets (CSS) is a means to an end: better, more efficient Web site design. In the real world, however, CSS does not provide a perfect, clear-cut path to that goal.To achieve the promise of CSS, working designers have employed a series of workarounds known collectively as hacks. At the most basic level, a CSS hack is a modification to the standard CSS code. Like any deviation from the norm, the use of CSS hacks has both its supporters and detractors: Some designers feel CSS hacks are an absolute necessity and others are fervently opposed to them. To figure out why the Web design community is divided over CSS hacks— and which camp you should be in—you’ll need a little background on the emergence of CSS. The Cascading Style Sheets Promise When work was begun in 1995 on the first CSS specification, the Web was one giant kludge. Hypertext Markup Language (HTML) tags were being pressed into service to handle chores they were never intended for.Tables, for example, meant to contain structured data were largely used for layout. But missapplied tags were the least of the designer’s woes when it came to working with HTML. HTML is perfectly suited for its original design: to represent scientific papers and other documents that adhered to a highly structured format. A structured document is formatted with headings and, where necessary, subheadings, for all titles along with standard paragraphs for all body text. HTML hit a major stumbling block when the Internet was eclipsed by the World Wide Web—and graphic design came to the Web. Designers used every trick in the book, and invented quite a few along the way, to reproduce their designs with HTML. Presentation tags, such as font, were inextricably entwined into the content—which meant sitewide style changes required a Herculean effort.To alter the typeface for all of a Web site’s primary headings, you had to either modify every single tag instance by hand or cross your fingers and perform an all-encompassing (and terrifying) search-and-replace operation. If you wanted to repurpose Web content for print or any other media, you had one choice and one choice only: redesign the site, page-by-page. Pages were top-heavy with dense mark-up code: a real structural jungle that designers had to hack through to make the smallest change. Moreover, any hope of HTML working with assistive technologies such as screen readers was completely off the table. The original drafters of the CSS specification hoped to cut away all the clutter brought by styling Web pages with HTML. CSS was conceived with numerous key advantages in mind: Separate presentation from content Flexible design model Faster loading times Easy, instant maintenance Portability Advanced design possibilities Enhanced user control Accessibility The following sections examine each of these in detail so you grasp completely what CSS can do. Separate Presentation from Content The first and foremost mission was to disconnect the tight stranglehold that HTML style tags brought to a Web page. By isolating the control of a page’s look-and-feel from the content, a clear pathway to building structured pages opens up where you can still get the design you want. Additionally, both content and design benefit in terms of accessibility. Search engines can get at the content easier for indexing, while designers have hands-on control of their presentation. The core concept of separating presentation from content leads to many other benefits of the CSS model. Flexible Design Model Even with the most basic implementation of text styling, CSS runs rings around HTML. Whereas font tags are limited to seven browser-dependent sizes, CSS offers both absolute, number-based systems in the measurement unit of your choice (points, pixels, ems, percentages, and many others) and relative keyword-based systems (that is, small, medium, large, smaller, larger, and so on). Design considerations common in print publishing (such as line spacing) are impossible in HTML but a snap in CSS. Aside from the specific properties available, the CSS methodology of assigning those properties is wonderfully robust.With CSS, you can re-style existing HTML tags or create custom styles in a variety of ways with classes, IDs, and through selectors. Selectors (whether as common as a descendent selector or as rare as adjacent-sibling selectors) encourage structural Web coding while delivering enhanced design control. Faster Loading Times To the casual Internet user, a Web page is completely virtual with no real substance or weight. Web designers, however, are very aware of the weight of their pages; the more code that’s in a page, the heavier it is and the longer it takes to load. For example, here’s the minimum code it takes to place a sentence on the page in the common HTML container, a font tag:

Welcome to my world.

Now, here’s the same content in the standard CSS container, a div tag:

Welcome to my world.

Multiply that doubled-difference many, many times for a single page—and then again for an entire Web site—and you have some idea of CSS’s edge in speed. Easy, Instant Maintenance As noted earlier, it’s a nightmare to change an HTML style across a site because styles are all applied at the lowest level, the tag. Not only must all pages with all the styles be altered one at a time, each page must be re-saved and then re-put to the server.With well-structured CSS, on the other hand, your styles are kept in a separate file where they can be modified in any text editor. Once published, a style change is immediately seen by anyone who views an affected page within the site. Portability Although the Internet may at times seem pervasive, it’s just one of many media. For example, many sites strive to have their Web pages available for print as well.With HTML-styled pages, the only viable route is to redesign the page with print in mind—a terrible chore to do it once and a never-ending time-suck if the site is updated frequently. CSS turns the HTML model on its head and allows you to simply specify a different style sheet for print—and, if desired, one for speech synthesizers, projectors, and hand-held devices, among others—and you’re done. Advanced Design Possibilities As defined, CSS is highly interactive and throws open the door to a multitude of design options. Just a few of the advanced text options were mentioned earlier; in addition to advanced sizing and line spacing, CSS also provides more robust alignment and far more specific margin and padding options.Text is not the only element to gain a power surge under CSS. The capability to control the position and tiling of background images (see Figure 1-1) is reason enough to use CSS in and of itself.