Cascading Style Sheets - CSS

Isolating a selector to standards compliant browsers

Mozilla Firefox is a relatively Web Standards' compliant browser, and so any attempts to isolate it, or many of the other browsers such as Opera or Safari can prove difficult. We can approach this as a method to write CSS selector definitions specific to Mozilla Firefox or Apple Safari.

There are a number of ways to get a given CSS selector to only affect the Firefox Web browser, and both of the below examples are based on using the short-comings and hacks meant for the other browsers to isolate the selector to Firefox.

1)
Write a general selector definition, and then use the common CSS hacks for Internet Explorer (IE5,IE6 and IE7) to exclude the hack-compliant browsers thereby isolating IE, and the other Web Standards compliant browsers.

Example:

body
{
font-family: "Trebuchet MS";
_font-family: Verdana; #font-family: arial;}

2)
Write a general rule that will apply to all browsers (Firefox included), and then write a second selector definition with higher specificity using CSS code that is not understood by IE and the other non-compliant browsers. Example:

ul li
{
list-style-type: none;
list-style-image: url(mybullets.gif);
}

ul>li
{
list-style-image: url(firefoxbullet.gif;);
}

By exploiting the fact that Firefox has implemented the child-of ul>li relationship, and the non standards compliant browsers have not, the second command only applies to Firefox. It goes without saying that my preferred and recommended method of isolating Firefox is the second approach. Unlike the first method which is using invalid CSS coding techniques, the second approach uses compliant CSS that will not cause any errors

Skinning and templating Drupal with themesÂ

Beyond creating a customized Drupal theme or skin that does not look like any of the out-of-the-box themes that are supplied with the application, ideal front-end Web Design and markup aims to create valid, accessible, and semantic markup that is visually pleasing, light on the browser (high content to markup ratio), and is easy for search engines to crawl.

In a related article, I touched on creating a Drupal homepage without the 'Blog look' that had come to be characteristic and typical of dynamic websites created by technologically savvy 'geeks' with little or no motivation and interest to apply equal or at least significant attention to the visual design and SEO viability of the web content. Successful and ideal CMS (Content Management System) implementation is transparent in the front-end. Technology should be an enabler of client-side features as being an impediment and unnecessarily manifesting itself to the user.

Here is an outline of some objectives and important points to consider in order to create A Drupal theme that fills the above needs and objectives

1. Start of by creating a layout in XHTML markup without thinking or taking into consideration any structural limitations of the CMS, and Drupal in this case (Just to clarify, Drupal themes are fully customizable using a rick library of theming functions). Make sure that your markup is not bloated or unnecessarily verbose in elements and attributes because doing so will affect your markup to content ratio which has an effect on SEO and page loading-times
   
2. For Search Engine Optimization (SEO), make sure that you create physical order for your content that will enable the search engine crawler to sequentially find and crawl the page content before it gets to routine and repetitive sections such as static menus, disclaimers, site seals and other content-poor objects and page sections that might distract it or lead it to secondary pages before it gets to crawl the page in question.
3. It goes without saying that table-layout it an accessibility no-no, and it unnecessarily limits flexibility and slows down site evolution and updates. Apply CSS to create a visual layout of your content.
   
4. Once you are satisfied with your static XHTML structure and the tentative or definitive CSS that you have on it, you can add PHP snippets to replace markup region contents with Drupal elements by inserting region snippets in your layout. If you want to add more content regions to place your blocks, menus and other Drupal content items, you can create them in template.php (PHPTemplate Drupal template engine) as explained in a related document.
5. Save the file as page.tpl.php and go on to customise the structure and standard markup of the other template files such as node.tpl.php, box.tpl.php etc
6. The Drupal templating structure allow visually limitless customization of any theming function and feature without touching core or module files - Drupal Theme Developers Guide .

If you need custom assistance and Drupal theme development, please contact us so that we can create a Drupal theme based on your branding and design guidelines and needs