Css Tip – Css Browser Selector

Styling sites for different browsers have always been a headache for front end developers. Sometimes, the implementation has its own prefixes, sometimes the model doesn’t work at all.

Browser specific stylesheets

So developers came up with the idea of browser specific stylesheets. For each different browser, you redefine a few style declarations to make the layout and styling work.

But having multiple stylesheets is far from optimal. You take more effort to organize your files, some browsers have quirks that needs some fixing, and all sorts of weird problem pops up. And that adds up to a lot of time wasted.

Solution

One more elegant solution will be to borrow the idea of browser prefixing. Instead of having multiple stylesheets, you now have one stylesheet with all the fixes that you can apply.

Even better, using this method allows you to extract other details like browser versions and operating systems. This way, you can target differrent content at different platforms and still have a static one-page website.

How it works

This is a script from Rafael Lima. The basic idea is to extract information from the userAgent string and apply the appropriate classes to the document element.

And when defining the style declarations, you just have to use the appropriate classes to fix the different cross browser errors.

Access the script from here

Remarks

This way of frontend development focuses on limiting server side interaction. Sending all the information to the client and let all the decision to be done over the client side.

All methods have their pros and cons. This method will be suitable for simple sites that require simple static content. If you are working on a site with dynamic content, handling the browser fixes server-side could be an appropriate choice, since its just a simple extension and can help reduce page load time.

If there is any questions or queries, leave a comment or drop me an email.

Advertisements

Getting Started Series

The Getting Started series introduces you to fontend development. Follow these tutorials to learn the basics of web developement. With all these basics, you can make simple adjustments to your sites, add in new information on your own.

  1. Markdown – Simple formatting for documents
  2. HTML – markup language for the web
  3. HTML – forms and tables

But if you want a more complete tutorial, on how to design and implement a website design from scratch, contact ongspxm@gmail.com for more information.

Design Mockup – GeissDice from 99designs

Another mockup from 99designs. This layout consist of a few intricate design elements, with the logos changing on mouseover.

This was done after a long time of rest. After I entered, my development process have not progressed far. This particular mockup took abit longer to complete, around 3 to 4 hours for this piece of work, but it turned out to look very good indeed.

Original design:
GeissDice from 99designs

Design Mockup – Etched from 99 designs

Other design from 99designs. This is particularly modern, using a simple color scheme of only a few colors, relying on the subtle changes on the grayscale to distinguish the different sections of the design.

There are many subtle designs in this one, but there are some elements that are fairly hard to extract (the background for the display). There is not much differences in there overall, check out the the completed mockup here.

Original design::
Etched by WebBox

Design Mockup – InsuranceSuite from 99designs

This design that I have chosen to implement is a content-based design. This differs significantly from other designs I have implemented, which focused more on graphics and aesthetics.

For the structure, I used a new css3 method for the layout. Flexbox layout greatly simplifies the structure of the layout design, reducing dependencies on pure css organization for the content layout. This could be very helpful, especially in creating mobile web applications.

That said, this flexbox structure certainly helps in content based designs, but for more graphical based design, it wouldn’t really do much difference. Therefore, future usage would have to depend on types of designs that I choose to implement.

The content of the mockup is quite scattered. I tried to implement as many design elements into the mockup as possible. Hence, I had to resort to using hidden links to activate different views (sidebar links toggles the form overlay), mashing up everything to give a complete feel of the design.

Original design:
Insurance Suite by JonSerenity

Design Mockup – SoundStation from 99designs

This latest design I have chosen is a mobile app design. This will be the first of many responsive design that I will be attempting. This is a very fun challenge, having to deal with all the changes in the breakpoint, coming up with the structure to display the different types of layouts.

Working on responsive interfaces is unlike working on a typical web design. With a web design, most of the time is spent on trying to replicate the exact look and feel of the design. But with a responsive design, a huge amount of thought is spent on figuring out the structure of the layout and the scripting required to change or update the layout accordingly. This could be a better practice for me, so you could expect more of these in the future.

Original Design (Click for mockup):
SoundDesign by Nataliia