CSS Snippets

сряда, 13 март 2013 г.

CSS3

Cascading Style Sheets or CSS is a style sheet language used for describing the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML, but the language can also be applied to any kind of XML documen. The first drafts of CSS3 appeared in 1999. Unlike CSS2 the new specification is devided in different modules, which are developed independantly and have different stability status. No modern browser supports the full specification yet. I personally think that the way CSS and HTML develop is a inefficient and slow. The language is limited and illogical. The browser support is broken.

събота, 9 март 2013 г.

More about Centering Elements

Horizontal centering with CSS:

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

Horizontal and vertical centering with CSS:

className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

The jQuery way:

$(window).resize(function(){
   $('.className').css({
      position:'absolute',
      left: ($(window).width() - $('.className').outerWidth())/2,
       top: ($(window).height() - $('.className').outerHeight())/2
      });
});  
// To initially run the function
$(window).resize();

About modernizr.js

modernizr.js is a feature detection compatibility library. It can be use to add HTML5 and CSS3 features to browsers that do not support them.

Modernizr creates an element, sets a specific style instruction on that element and then immediately retrieves it. Browsers that understand the instruction will return something sensible; browsers that don’t understand it will return nothing or “undefined”.
First create an HTML document:

<html class="no-js" lang="en">
  <head>
    <title>Hello Modernizr</title>
    <script src="modernizr.js"></script>
  </head>
  <body>
  </body>
</html>

This is how you detect if an element is supported. Let's detect a canvas element:

if (Modernizr.canvas) {
    alert("This browser supports HTML5 canvas!");
} else {
    alert("no canvas :(");
}

CSS width: calc(100% -100px); Alternative using jQuery

Some browsers do not properly support the CSS specification. jQuery offers many alternative ways to solve these incompatibility problems. For example this CSS code:

.someStyle {
     width: calc(100% -100px);
}

The above could be achieved with jQuery:

$('#yourEl').css('width', '100%').css('width', '-=100px');

How to Center <div> Element Inside of Another <div>Element

Centered <div> inside another <div>

To achieve the above effect to center a <div> element inside of another <div> element

<div id="outer">
   <div id="inner">
      This is inner div.
   </div>
</div>

The CSS

#outer {
    background-color: #FFFFFF;
    padding: 15px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
#inner {
    color: #000;
    background-color: #000000;
    padding: 10px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

CSS Styling with jQuery

The poplar jQuery library offers an alternative to CSS for styling HTML elements. The CSS way:

div.somediv {
  width: auto;
  margin-right:100px;
}

With jQuery:

$(window).resize(function(){
  $('.somediv').each(function(){
    $(this).css('width', $(this).parent().width()-100);
  })
});

Theme Switching

Many modern sites support different themes. It is not just a marketing gimmick, such functionality allows people with accessibility problems to have their custom themes.
Here is a nice article explaining a technique:

How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes

сряда, 13 март 2013 г.