Tag Archives: css

Adding Custom CSS Properties Using gtkmm

Adding custom CSS properties in gtkmm is actually pretty simple once you know how.  It took me quite a bit of searching along with some trial and error before I came up with a pretty simple pattern for doing so.  What I was looking for was a way to use custom CSS without having to develop a whole bunch of custom classes which extended Gtk base classes.

First thing we need to do is to create a class that extends from Gtk::Widget.  Now, we don’t necessarily have to use the class directly as a visual object however, it does need to extend the Gtk::Widget class for it to work.  The following is my example for creating simple custom CSS properties.  Let’s start off by adding a single custom property called “width”.

 

class CustomCSS : public Gtk::Widget {
 
    public:
        Gtk::StyleProperty<int> width_property;
        int width;
 
        CustomCss() :
            Glib::ObjectBase("customcss"),
            Gtk::Widget(),
 
            //-gtkmm__CustomObject_customcss-width
            width_property(*this, "width", 100),
            width(100)
            {}
};

Let’s examine the above code to find out what’s really going on here.

 

class CustomCSS : public Gtk::Widget

First we need to create a class the extends the Gtk::Widget class.

 

public:
    Gtk::StyleProperty<int> width_property;
    int width;

Next, we need to add a public style property that defines what will be reading the width values and a simple property of the type we’ll want to use, in this case an int.

 

CustomCss() :
    Glib::ObjectBase("customcss"),
    Gtk::Widget(),
 
    //-gtkmm__CustomObject_customcss-width
    width_property(*this, "width", 100),
    width(100)
    {}

Finally, we’ll want to implement a default constructor where we set the name we will be using in our CSS to reference this class “customcss”, pass in the Gtk::Widget() constructor, then we’ll need to being initializing our custom properties to be used in CSS.  For this, we initialize the width_property, give it a CSS property name of “width” and set the default value to 100.  Then we do the same for the actual property by calling width(100).

Now, if we want to use the custom CSS class and properties we’ll need to add them to our CSS file.  I noted above also that in our CSS file, the “width” property would actually need to be specified as “-gtkmm__CustomObject_customcss-width”.  The first part “-gtkmm__CustomObject_” will be the default used by gtkmm when accessing the custom property, the last two parts “customcss” and “width” we control by setting the Glib::ObjectBase(“customcss”) and the width_property(*this, “width”, 100) respectively.

 

/* somefile.css */
 
* {
    -gtkmm__CustomObject_customcss-width: 500;
}

To enable this custom property to be used, we first need to define an all selector “*” followed by our CSS implementation which contains “-gtkmm__CustomObject_customcss-width: 500;”.  Now, let’s use it in our C++ application.

 

#include <gtkmm.h>
 
int main(int argc, char ** argv){
 
    //your code doing something useful
 
    //setup our css context and provider
    Glib::ustring cssFile = "/path/to/somefile.css";
    Glib::RefPtr<Gtk::CssProvider> css_provider = Gtk::CssProvider::create();
    Glib::RefPtr<Gtk::StyleContext> style_context = Gtk::StyleContext::create();
 
    //load our css file, wherever that may be hiding
    if(css_provider->load_from_path(HOME_DIRECTORY + "/.config/xfce4/finder/xfce4-finder.css")){
        Glib::RefPtr<Gdk::Screen> screen = window->get_screen();
        style_context->add_provider_for_screen(screen, css_provider, GTK_STYLE_PROVIDER_PRIORITY_USER);
    }
 
    //instantiate our custom css class
    CustomCss css;
 
    //get the width
    int width = css.width_property.get_value();
 
    //do something useful with the width we retrieved from css
 
    //run application run
    application->run(main_window);
 
    return EXIT_SUCCESS;
}

As you can see from the above, we’ve created both a CssProvider and a StyleContext, then we load our CSS file by using load_from_path, set our screen to be the main application window’s screen, then finally we add a provider by calling add_provider_for_screen.  Once that’s all done we can use our CustomCSS class.  Simply instantiate it, and call get_value() of the property we want to use.  It’s that simple.  If we wanted to add more than one property, we just added them to the constructor’s inline calls like so.

 

class CustomCSS : public Gtk::Widget {
    public:
 
    Gtk::StyleProperty<int> width_property;
    int width;
 
    Gtk::StyleProperty<int> height_property;
    int height;
 
    //etc...
 
    CustomCss() :
        Glib::ObjectBase("customcss"),
        Gtk::Widget(),
 
        //-gtkmm__CustomObject_customcss-width
        width_property(*this, "width", 100),
        width(100),
 
        //-gtkmm__CustomObject_customcss-height
        height_property(*this, "height", 50),
        height(50)
 
        //etc...
        {}
};

 

Once again, we add the new properties if we want to our CSS file.

/* somefile.css */
 
* {
    -gtkmm__CustomObject_customcss-width: 500;
    -gtkmm__CustomObject_customcss-height: 100;
    /* etc... */
}

 

Then we access them the same way as before in our C++ code.

//instantiate our custom css class
CustomCss css;
 
//get the width
int width = css.width_property.get_value();
 
//get the height
int height = css.height_property.get_value();
 
//get etc...

 

I hope this helps.  I found this a simple and clean way of introducing custom CSS properties without having to create a bunch of Gtk::Widget classes.  As always, thanks for stopping by and let me know if there’s anything I can do to help.

 

 

New Rubik’s Cube jQuery Plugin

I consider myself an avid speed cuber. Not world class, but fast enough and not too obsessed with it. That being said all the sites I’ve seen in the past with references to algorithms all seem to use really clunky client side Java or Flash plugins to handle the demonstration of moves.  I wanted to create a simple to implement jQuery plugin that utilizes the browser’s built in features to do the same thing.  The result is my jquery.cube.js plugin. As seen below.

The plugin code is available here: https://github.com/godlikemouse/jquery.cube.js

 

See the Pen jQuery and CSS Implemented Rubik’s Cube by Jason Graves (@godlikemouse) on CodePen.

This plugin utilizes standard cube notation, both modern and old to execute moves. For example, the moves executed above are utilizing the following notation:

x (R’ U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 R2 x’

This algorithm is being passed to the cube plugin by way of the execute() method.

This plugin currently supports a number of configuration options that can be passed at instantiation time including, cube face colors, animation delay time with more to come shortly.

For more information on this plugin or to view the source please visit: https://github.com/godlikemouse/jquery.cube.js

Responsive CSS Truncate and Ellipsis

We’ve all run into situations where we need to truncate text due to length constraints.  Most of the time this simply requires a truncation function which determines the maximum length of text and if the string exceeds that length, truncates it and adds an ellipsis (“…”).  But what about when we are developing responsive web applications that require text to be truncated according to the current device screen or browser size.  Luckily CSS3 supports a text-transform property called “ellipsis”, this however also requires that the bounding box defined with an overflow and a definite width and height.  Or does it…?

I’ve found an interesting way to implement CSS text truncation in a responsive setting that can be used with responsive layouts such as Pure, Bootstrap, etc.

The following code creates a single line responsive truncate and ellipsis behavior.

.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}
 
.truncate-ellipsis > * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

<div class="truncate-ellipsis">
    <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo nibh. Sed cursus ante ut nunc molestie viverra.
    </span>
</div>

 

This works by taking a parent element, in this case a “div” with the class “truncate-ellipsis” and turning it into a display type table with a fixed table layout. Its child element, in this case a “span” is transformed into a table cell with the overflow set to hidden and the text-transform property set to ellipsis.  This of course can be modified to suit specific needs of height and container size and should act as a pretty good starting point for basic implementation.

Web Developer Essential Tools

Foreword

The following highlights what I believe to be the best tools for web development and best of all, they’re all free.  This is a living reference which will be updated as new and better tools are found.  Feedback and suggestions are always welcome.

The List

Google Chrome

Google Chrome

Google Chrome

Light, extremely fast, jam packed with features and a debugger that makes short work of CSS and JavaScript.  The ability to right click inspect an element, change CSS values live in the DOM using up, down arrows or by entering values directly make this an essential tool for web development.

Get Google Chrome

ColorPic

ColorPic

ColorPic

Fantastic color picking tool which allows for obtaining the color values for anything on the screen.  Creation and loading of palettes, values can be slider modified for easy lighting or darkening of tones.  Shortcuts make color selection a cinch.  A must have tool.

Get ColorPic

Tape: Google Chrome Extension

Tape: Google Chrome Extension

Tape: Google Chrome Extension

You know that problem you have in CSS where you’re trying to line up elements either horizontally or vertically and you end up using paper to see if the alignment is correct, well you can forget about doing that ever again.  The Tape plugin allows you to easily place lines on the screen, then you can adjust your CSS to match.

Get Tape Extension

XML Tree: Google Chrome Extension

XML Tree: Google Chrome Extension

XML Tree: Google Chrome Extension

Display XML, RSS any form of node tree in a collapsible human readable format.

Get XML Tree Extension

Awesome Screenshot: Google Chrome Extension

Awesome Screenshot: Google Chrome Extension

Awesome Screenshot: Google Chrome Extension

Quickly screen grab what’s being displayed in the browser, draw, blur, annotate, write, etc. all from within the browser. Save when you’re done either locally or in the cloud.

Get Awesome Extension

LightTable

LightTable

LightTable

LightTable is one of the most robust and unique editors I have ever used.  Extremely powerful, easily customized with more features than I can list here.

Get LightTable

GIMP

GIMP

GIMP

If you’re used to Photoshop, it will take a little bit of a learning curve to get used to GIMP’s shortcuts and approach to image manipulation. However, once you get used to the shortcuts and image editing as a whole, you won’t want to go back. Select an area, resize the selection area by mouse or by shrink or grow amounts, copy then shortcut paste into a new image frame, fast. No more, click save, select extension type from a drop down, confirm, confirm, confirm. Instead, shortcut for save, enter filename with the extension (.png, .jpg, .gif, etc.), hit enter, enter, done. Made for rapid manipulation of images, tons of plugins, filters, great tool.

Get GIMP

Relatively Positioned Absolute Elements

Foreword

Absolutely positioned elements can be quite useful, but what if you have something centered or off to one side and you need to just nudge an absolutely positioned element.  The following will show you a handy technique for moving absolute elements relative to the elements around it using nothing but CSS.

Getting Started

First let’s put together a scenario.  Let’s say you have an XHTML document like the following:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
<head>
 
</head>
 
<body>
 
<div class="article">
<img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
<label class="title">A Test Article</label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec libero ac sapien dapibus dapibus. Sed a enim risus, non hendrerit nunc.
Sed non scelerisque ipsum. Nulla congue accumsan quam id pharetra. Nunc dolor purus, aliquam eu sodales id, pulvinar a sem. Nunc vel lorem
ut ligula ultricies sollicitudin sit amet quis justo. Morbi tincidunt porta ipsum, at viverra tellus vehicula nec. Ut arcu nunc, ultrices
nec pellentesque dignissim, molestie vitae lorem. Sed id ultricies leo. Nam porttitor justo non arcu eleifend imperdiet.</p>
</div>
 
</body>
 
</html>

 

To make things a bit more complex for this example, let’s say the article was centered and you wanted to have the avatar image left positioned outside of the article container.  Using relative positioning this is quite easy, but we don’t want a blank area where the avatar image.  So to solve this we need to position the element absolutely.  Let’s add the following CSS declarations:

 

.article {
font: 13px sans-serif, tahoma, helvetica, arial;
width: 400px;
margin: 0px auto;
border: solid 1px #efefef;
padding: 10px;
}
 
.article label.title {
font-weight: bold;
}
 
.article cite.author {
font-style: italic;
margin-left: 20px;
}
 
.article img.avatar {
position: absolute;
padding: 3px;
border: solid 1px #efefef;
}

 

Now when we view the page, the problem becomes very self evident.

 

 

Scenario Problem

Scenario Problem

Solution

To solve the problem, we need to use both absolute positioning so the element does not take up visual space in the DOM, and we need to somehow position the element using relative coordinates.  We can do this by using positive and negative margins very much the same way you would use top or left when the element is positioned relatively.  Consider the following:

margin-left: -120px;

Let’s add this declaration to our avatar image in CSS and see what happens.

 

.article {
font: 13px sans-serif, tahoma, helvetica, arial;
width: 400px;
margin: 0px auto;
border: solid 1px #efefef;
padding: 10px;
}
 
.article label.title {
font-weight: bold;
}
 
.article cite.author {
font-style: italic;
margin-left: 20px;
}
 
.article img.avatar {
position: absolute;
padding: 3px;
border: solid 1px #efefef;
margin-left: 120px;
}

 

 

Scenario Solution

Scenario Solution

Perfect! The avatar image is outside the visible article container which is bordered, the article is centered using margin auto.  We’ve in essence, relatively positioned an absolute element.

 

Download Project Files

CSS Browser Specific Override

There are a lot of hacks out there dealing with getting specific CSS files to load on a per browser basis.  I wanted to try a different approach.  I wanted a way to specify the default or standard CSS that all pages will use as well as a way to specify the browser specific override file.  There are real easy ways to do this in server side programming languages like PHP, as well as client side approaches in JavaScript, but I wanted to develop a tag only client side approach that was clean.

<html>
<head>
    <!--default-->
    <link type="text/css" rel="stylesheet" href="style/style.css" />
    <!--ie-->
    <!--[if IE 6]><link type="text/css" rel="stylesheet" href="style/override/ie6.css" /><![endif]-->
    <!--[if IE 7]><link type="text/css" rel="stylesheet" href="style/override/ie7.css" /><![endif]-->
    <!--[if IE 8]><link type="text/css" rel="stylesheet" href="style/override/ie8.css" /><![endif]-->
    <!--[if IE 9]><link type="text/css" rel="stylesheet" href="style/override/ie9.css" /><![endif]-->
    <!--chrome/safari-->
    <link type="text/css" rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio:0)" href="style/override/webkit.css" />
</head>
<body>
    <div id="ie6">
        Internet Explorer 6
    </div>
    <div id="ie7">
        Internet Explorer 7
    </div>
    <div id="ie8">
        Internet Explorer 8
    </div>
    <div id="ie9">
        Internet Explorer 9
    </div>
    <div id="webkit">
        Webkit
    </div>
</body>
</html>

The approach is simple yet effective, specify the CSS standard styles in the “style.css” file.  If there are any problems in a specific browser, modify the browser specific override CSS file.

This example has all “div” tags hidden in the “style.css”, but has them displayed in each browser override file.  For example, if you are using IE8, then the “ie8.css” override file is used which contains:

#ie8 {display: block;}

The files used in this example are available for download and use:

Download Project Files

Creating Fluid Fullscreen XHTML CSS Layouts

Making the transition from old school html to new school xhtml can be quite painful, especially if you’re not familiar with how to do this without the use of tables. In this article, I will discuss the techniques and ideas necessary to create fluid xhtml/css layouts. Let’s examine the following XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/xhtml;charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
    </head> 
 
    <body> 
 
    <div class="container">
        <div class="header">
            <div class="header-content">Header</div>
        </div> 
 
        <div class="body">
            <div class="left-sidebar">
                <div class="left-content">left</div>
            </div>
            <div class="right-sidebar">
                <div class="right-content">right</div>
            </div>
            <div class="content">Content</div>
        </div> 
 
        <div class="footer">
            <div class="footer-content">Footer</div>
        </div>
    </div> 
 
    </body> 
 
    </html>

Now let’s begin dissecting it. The first line of the XHTML document is the doctype (document type) specifier. This tells the browser that the following markup is to adhere to the standards of XHTML strict, as defined by the W3C (World Wide Web Consortium www.w3.org). The xhtml strict doctype basically states that the document must be XML compliant and follow the rules of the doctype, the root element in the document must be “html” and the root element must contain an xml namespace (xmlns) attribute.

Now as you see, the document does in fact meet those rules. The first node in the document is “html” and it does have the xmlns attribute…BUT WHAT DOES IT ALL MEAN? Don’t worry, we’ll go line by line and break it down.

The first line in the document is the doctype, which we’ve all ready talked about, the second line is the “html” node. This has an XML namespace attribute on it that basically states that all the nodes defined in this document, are by default, XHTML. The xml:lang=”en” attribute specifies that the xml in the document is English in language as does the lang=”en” which specifies the language content of the document is also in English.

The next node is the “head” node, which is basically the same as in old school HTML. It contains a “title” node (document title), a “meta” node and a “style” node.

The “meta” node in this case is specifying the content type of the document as well as the encoding/charset type. The content type is pretty self expanitory, it’s xhtml/text, the encoding/charset for the document is Unicode (aka ISO 10646, for more information check out http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0040).

The “style” node is specifying where we are going to get the style or CSS from? In this case it’s a document called “style.css”. So what have it included in this way? The answer is, to ensure that the browser type reading this document is CSS1 compliant or better. We’ll check out the details of the CSS later, right now let’s just check out the XHTML.

Next we get to the guts of the operation, the “body” tag. Within the body is the basic layout of the page. Now, the idea behind this layout is to achieve a fluid layout that will take up the entire height of the page, without adding scrollbars and without the need for any “fixing” javascript to adjust the sizing for us. In short, we are defining the basic structure for a tableless layout that will give us a header, footer, left pane, content area and a right pane. This may be a little more that you’re looking for, but I figured this would be the best way to demonstrate this fluid layout technique.

This is basically what we want for this example:

XHTML Layout

XHTML Layout

So now the important part, if you haven’t already, you might want to take a moment and create an index.html page and copy the example XHTML document into it, then create a style.css page at the same level. It’s important to understand what’s going on as we make changes to the CSS and it’s a lot easier to understand if you can see the changes as they happen.

Now, let’s create the CSS to layout our XHTML document in the manner we want. First thing we need to do which may seem a bit odd if you’re first making the transition from HTML to XHTML is set the height of the “html” and “body” nodes. In HTML, these are already set to 100% height of the current window, however in XHTML they are not. So let’s add the following to our CSS:

html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}

So now, we’ve set the “body” and “html” up to take up the entire screen and not pad or margin the edges. Ok, well that’s a good start, next let’s add a little background color and sizing to various parts of the document so we can see what’s where.

.header, .footer{
height: 80px;
background-color: #EFEFEF;
} 
 
.body{
background-color: #C7DFFA;
} 
 
.left-sidebar{
background-color: gray;
} 
 
.right-sidebar{
background-color: gray;
}

Ok, so now let’s look at what we have. YIKES!

XHTML Example

XHTML Example

At this point you should have something similar to the above example. We can see the individual divs, but we’ve got some work to do to get them layed out like we want.

The first thing we’re going to want to do is set the container to be 100% in height, that way we can have the full height of the window to layout our divs.

.container{
height: 100%;
}

Next, let’s set the height of our body class “.body” (not the “body” tag) to 100%. We want this area to expand and contract with the window and still take up the entire height of the screen. Let’s also just for clarity, hide the left and right sidebars (we’ll show them again later)

.body{
height: 100%;
background-color: #C7DFFA;
} 
 
.left-sidebar{
display: none;
} 
 
.right-sidebar{
display: none;
}

XHTML Example

XHTML Example

Well, that’s a little better, but there are scrollbars on the window now. We wanted 100% of the available screen height but instead of we got 100% of the window height, what’s going on? This is exactly what’s supposed to happen in XHTML the height is based up the actual window height, not the available height. So to fix this we need to do a little finessing. He’re what we need to do. We need to set the top and bottom margins of the “body” class (not the “body” tag) to be negative the height of the header and footer respectively. Being that our header and footer are the same height (80px) we need to subtract that area from the “body” class (not the “body” tag). Like so:

.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;
}

XHTML Example

XHTML Example

Well, that took care of the height problem, but wait…what happened to the header, it’s gone. Actually, it’s behind the “body” class (not the “body” tag), we need to bring it forward. To do that we set the position to relative. This allows us the position the tag using coordinates if we want and forces the browser to paint these above other non-relative/absolute layers.

.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;
}

Ahhhh, that’s better. The “header” and “footer” are visible, the “body” class (not “body” tag) are acting correctly. You may have also noticed at this point that the “content” is not longer visible within the “body” class (not the “body” tag). Don’t worry about that, we’ll address that later. So now, we can resize the window all we want and the height is correct, no scrollbars, life is peachy. Now let’s tackle those sidebars. Let’s start by making them visible again.

.left-sidebar{
background-color: gray;
} 
 
.right-sidebar{
background-color: gray;
}

XHTML Example

XHTML Example

Wait, where are they? They’re still not visible, let’s make them visible and put them in the right spot. First let’s set the height to 100%, next let’s give it a width of 100px, then let’s set to the left by using float left.

.left-sidebar{
height: 100%;
background-color: gray;
width: 100px;
float: left;
}

XHTML Example

XHTML Example

GEORGEOUS! That’s what we want, now let’s do the same to the other side but float it right.

XHTML Example

XHTML Example

PERFECTION! Now all we have left to do is situate our content layers properly and we’re done. So let’s start with the “left-content”. To make the content of this layer visible we need to pad enough to account for the header and the footer. Remember, we set the height of this div to 100%, so the top and the bottom are hidden behind the “header” and “footer”. So let’s pad the top by 100px, bottom by 100px, left by 10px and right by 10px, that should look nice. Also, let’s apply this to both the left and right content areas. I’m going to also set the “right-content” to text align right, just for looks.

.left-content{
padding: 100px 10px 100px 10px;
} 
 
.right-content{
padding: 100px 10px 100px 10px;
text-align: right;
}

XHTML Example

XHTML Example

Looking good, now let’s finish up by getting the “content” visible and formatted. So let’s do basically the same thing and pad the “content” div, let’s set the top padding to 100px, left to 120px (100px plus 20px for looks), bottom to 100px and right to 120px.

.content{
padding: 100px 120px 100px 120px;
}

And while we’re at it, why not format the header and footer content nicely too.

.header-content{
padding: 20px;
text-align: center;
} 
 
.footer-content{
padding: 20px;
text-align: center;
}

XHTML Example

XHTML Example

Now we’re done, we have a fully fluid layout that takes up 100% of the height and width. The content and sides resize correct. We only get scrollbars when the content is crushed, SUCCESS! Hopefully this helps some of you out there, belows is the complete CSS just in case you need it or the examples didn’t work out for you.

html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    } 
 
    .header, .footer{
    height: 80px;
    background-color: #EFEFEF;
    position: relative;
    } 
 
    .header-content{
    padding: 20px;
    text-align: center;
    } 
 
    .footer-content{
    padding: 20px;
    text-align: center;
    } 
 
    .container{
    height: 100%;
    } 
 
    .body{
    height: 100%;
    margin-top: -80px;
    margin-bottom: -80px;
    background-color: #C7DFFA;
    } 
 
    .content{
    padding: 100px 120px 100px 120px;
    } 
 
    .left-sidebar{
    height: 100%;
    background-color: gray;
    width: 100px;
    float: left;
    } 
 
    .right-sidebar{
    height: 100%;
    background-color: gray;
    width: 100px;
    float: right;
    } 
 
    .left-content{
    padding: 100px 10px 100px 10px;
    } 
 
    .right-content{
    padding: 100px 10px 100px 10px;
    text-align: right;
    }

CSS From A Single Source

When you have the need to write browser specific CSS but don’t want to resort to serving up multiple CSS files from the server, scripting styles or inlining tag styles, keep this in mind. There is a way to write browser specific CSS from a single CSS file and here’s how you do it. Let’s assume that you have a style that you only want picked up by Internet Explorer and not a Mozilla flavored browser. For testing purposes, let’s change the color of text to red for IE:

/* Assume this is a style block */ 
 
P{
#color: red;
_color: red;
}

If you haven’t seen this syntax before, you’re probably thinking…what the hell is that? The “#” and “_” sign prefixing styles will only be picked up by Internet Explorer browsers, Mozilla based browsers will discard the styles altogether and move on. The reason we use both the “#” and the “_” is due to Internet Explorer versions, certain versions will only acknowledge the “#” sign, while others only see the “_” sign. So to be safe we use both. Now try the above code in your own page, create a paragraph tag, stick some text in it and open it with Internet Explorer. Booyah! red text, so now what about Mozilla flavored browsers:

/* Assume this is a style block */ 
 
P{
color: green;
#color: red;
_color: red;
}

In CSS we have the general rule of “last one wins”. In this case Internet Explorer will see the “color: green;” style and apply it, then depending on the version of IE, it will see on of the “#” or “_” prefixed styles and apply that. Being that last one wins, the paragraph block will be styled red. Mozilla on the otherhand will only see the “color: green;” style, then completely discard the “#” and “_” prefixed styles, leaving the Mozilla paragraph block green. Try it yourself in both browsers and you’ll see what I mean, hope this helps the next time you need to write browser specific CSS.

Another way to directly target a specific browser using only CSS is by use of Browser Specific class selectors. Browser specific class selectors work very much in the same way as CSS hacks, but can offer more direct browser targetting and feature selection. Take for an example, the following HTML:

<div class="example"></div> 
 
<style type="text/css">
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win .gecko .example {
background-color: red
}
.linux .gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

Each class selector specifically targets a particular browser or feature of the browser.