css

Standards compliant browsers (FF, Safari etc) and IE browsers require different CSS selector definitions to implement transparency. Here is what is necessary to set the following element to 50% transparency.

div#header
    {
        opacity: 0.5;
        filter: alpha(opacity = 50);
    }

Similar to the above online tool provided by Chami.com especially for users familiar with the UI (User Interface) and functionality of HTML-Kit, Chami.com's new application (currently in Alpha version) HTML-Kit Tools for Windows/Linux has a similar feature for general web documents.

The document information window provides a progressively expandable and dynamic visual representation of the current document's DOM. This feature is useful in quickly understanding the DOM structure of a document to aid in scripting, or writing meaningful CSS with selectors of varying specificity (By understanding the DOM ancestry of a given element within the document tree, it is easy to write selectors of increased or reduced specificity).

CSS Poster for your stylesheets - This new online tool makes it possible to create quick reference posters for your CSS files.

Drupal was selected as the ideal CMS infrastructure by the Recreational Services Department of Indiana University. The design team for this department had a clear vision, and an approved set of mock designs for the proposed website. The In-house content manager for Indiana University described the vision to include available functionality in Drupal, as well as customizations of existing modules to fit the specific website needs of the student, staff and alumni community. The presentation of content in this CMS setup was to be based on the already approved mocks (Adobe Photoshop files) with reasonable enhancements and accommodation for the specific needs of a CMS website.

iDonny Productions created a custom Drupal theme based on the approved designs provided by the client; with multiple content regions to enable the dynamic placement of content blocks depending on a predetermined logical relevance matching system.

NB: Although we always recommend the use of semantic XHTML markup without using tables for layout, the scope requirements for this site required the use of tables for basic layout to avoid differences in browser implementation of CSS-P positioning box models.

Indiana University Recreational Services Website

Without a proper understanding of CSS selector specificity, the basic approach to managing the override of one CSS is to have a single selector/declaration pair for every element, and then employ the !important switch/declaration to override pre-existing declarations.

The above approach works, but is severely limited in the flexibility, versatility and the interchangeable presentation format intended of CSS/XHTML. The use of !important declarations divides declarations into only two groups: Those that are !important, and the rest of them. Without regard to specificity, and if one focuses too much on the use of !important to override other declarations, the problem of two or more !important declarations comes into play. In the practical sense, the more specific of the two or more !important declarations will win and override the rest, but if the CSS author is not aware of which and how many !important declarations exist, this can lead to very lengthy debugging sessions. NB: The last statement calls for proper organisation and a planned approach to XHTML markup and CSS authoring to properly manage and locate CSS declarations.

Neither, but !important is harder to find/track and control. Since inline CSS is and will always be found next or on the same page as the markup that it is attempting to control, it is relatively easier to control.

Based on my experience and opinion, !important CSS declarations should only be used in troubleshooting situations where the author would like to test a layout, or override CSS declarations in an emergency without having to access and hard-code inline CSS. This is especially important and useful in dynamic web content generations situations such as CMS where the presentation team may/should not constantly access and edit markup. Inn addition, if @include CSS files are used, all !important declarations can be grouped in an emergency/patches/troubleshooting/temporaty CSS include file where they can be located and adjusted or eliminated as necessary.

In the absence of !important declarations, specificity is a powerful tool and approach to creating multiple and progressively overriding declarations if the XHTML markup used is well thought-out and hierarchical. Also, the proper use of IDs and CLASSES to define the mark-up makes it possible to target and style any section or individual element of an XHTML document. I would recommend using an onion ring approach to marking-up content and marking it with IDs and CLASSES so that CSS selectors of varying specificity can be employed.

An ideal application for this markup and styling approach; that is not well exploited at the moment is the ability to enable skinning of content to enable different layout and presentation schemes to be applied to content. Having several regimes of CSS declarations of different specificity in place enables one to use client--side or server-side scripting to switch themes on the fly. This can be used for accessibility (large text, or narrow hand-held screen users being able to change layouts), or it cab be part of a theming approach such as the Mclayout.