It's All About Web

It's all about web design and development, compose of css, html and js codes, tutorials and guidelines.

[itsallaboutweb-blog]

CSS3 brought us some impressive features that revolutionized the way we build websites. Here are twelve of them that are finally supported in all browsers and can be used right now.

[itsallaboutweb-blog]

Freelance Front-End Web Developer - Lebanon

[itsallaboutweb-blog]

June - iPhone App Website Template

June - iPhone App Website Template by @JamiePeak on @creativemarket

[itsallaboutweb-blog]

A blog post about CSS3, HTML5, Flexbox and Layout from Greg Smith at Bocoup.

[itsallaboutweb-blog]

Do you know what the difference between these selectors are? ul li { margin: 0 0 5px 0; } ul > li { margin: 0 0 5px 0; } I'll admit it took me longer than

[itsallaboutweb-blog]

52Framework

Lime.js

Twitter Bootstrap

HTML Kickstart

HTML Boilerplate

Over the last few years, HTML5 and CSS3 have completely revolutionised the World Wide Web as we know it...

[itsallaboutweb-blog]

Importing style sheets: the ‘@import’ rule

CSS Cascading and Inheritance Level 3 - Importing style sheets: the ‘@import’ rule

The ‘@import’ rule allows users to import style rules from other style sheets. Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet. The ‘@import’ keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(…) around it.

Example 1:

The following lines are equivalent in meaning and illustrate both ‘@import’ syntaxes (one with ‘url()’ and one with a bare string):

@import “mystyle.css”;

@import url(“mystyle.css”);

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent ‘@import’ rules. Such media-dependent imports include a comma-separated list of “media queries” after the URI. In the absence of any media query, the import is unconditional. (Specifying ‘all’ for the medium has the same effect.) The UA must import the style sheet if (and only if) the media condition evaluates to true.

Example 2:

The following rules illustrate how ‘@import’ rules can be made media-dependent:

@import url(“fineprint.css”) print;

@import url(“bluish.css”) projection, tv;

@import url(“narrow.css”) handheld and (max-width: 400px);

The evaluation and full syntax of the expressions after the URL is defined by the Media Queries specification [MEDIAQ].

When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to a separate style sheet.

Content-Type of imported stylesheets

The processing of imported stylesheets depends on the actual type of the linked resource. If the resource does not have Content-Type metadata, or the host document is in quirks mode and has the same origin as the imported stylesheet, the type of the linked resource is text/css. Otherwise, the type is determined from its Content-Type metadata.

If the linked resource’s type is text/css, it must be interpreted as a CSS stylesheet. Otherwise, it must be interpreted as a network error.

This articles from W3C

http://www.w3.org/TR/css3-cascade/

[itsallaboutweb-blog]

Shorthand Properties

CSS Cascading and Inheritance Level 3 - Shorthand Properties 

Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.

For example, the CSS 2.1 ‘font’ property is a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’, and ‘font-family’ all at once. The multiple declarations of this example:

h1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal;

}

can therefore be rewritten as

h1 { font: bold 12pt/14pt Helvetica }

When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value.

This means that a shorthand property declaration always sets all of its subproperties, even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties. Carefully used, a shorthand can guarantee a “blank slate” by resetting sub-properties inadvertently cascaded from other sources. For example, writing ‘background: green’ rather than ‘background-color: green’ ensures that the background color overrides any earlier declarations that might have set the background to an image.

In some cases, a shorthand might have different syntax or special keywords that don’t directly correspond to values of its sub-properties. (In such cases, the shorthand will explicitly define the expansion of its values.)

If a shorthand is specified as one of the CSS-wide keywords, it sets all of its sub-properties to that keyword. (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)

Declaring a shorthand property to be ‘!important’ is equivalent to declaring all of its sub-properties to be “!important”.

Resetting All Properties: the ‘all’ property

Name: all

Value: initial | inherit | default

Initial: See individual properties

Applies to: See individual properties

Inherited: See individual properties

Percentages: See individual properties

Media: See individual properties

Computed value: See individual properties

Animatable: See individual properties

The ‘all’ property is a shorthand that resets all CSS properties. It only accepts the CSS-wide keywords.

For example, if an author specifies ‘all: default’ on an element it will block all inheritance and reset all properties, as if no rules appeared in the author level of the cascade.

This can be useful for the root element of a “widget” included in a page, which does not wish to inherit the styles of the outer page.

This articles from W3C

http://www.w3.org/TR/css3-cascade/

[itsallaboutweb-blog]

Cross Browser Inline Block Style

Sample CSS Code:

<style>

li {

width: 200px;

min-height: 250px;

border: 1px solid #000;

display: -moz-inline-stack;

display: inline-block;

vertical-align: top;

margin: 5px;

padding:10px;

zoom: 1;

*display: inline;

_height: 250px;

}

</style>

Sample HTML Code:

<!doctype html>

<html class="no-js" lang="en">

<head>

<meta charset="utf-8">

<meta name="description" content="...">

<meta name="author" content="...">

<meta name="keywords" content="...">

<title>Name of your Page</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<ul>

<li>

<div>

<h4>This is awesome</h4>

<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>

</div>

</li>

<li>

<div>

<h4>This is awesome</h4>

<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>

</div>

</li>

<li>

<div>

<h4>This is awesome</h4>

<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>

</div>

</li>

<!— duplicate the ‘li’ to see what happen —>

</ul>

</body>

</html>

Reference:

http://css-tricks.com/snippets/css/cross-browser-inline-block/

http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

[itsallaboutweb-blog]

Cross Browser Opacity

CSS Code

<style>

.opacity-transparent-classname {

  /* IE 8 */

  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */

  filter: alpha(opacity=50);

  /* Netscape or Mozilla Firefox */

  -moz-opacity: 0.5;

  /* Safari 1.x */

  -khtml-opacity: 0.5;

  /* Good browsers */

  opacity: 0.5;

}

</style>

Reference

http://css-tricks.com/snippets/css/cross-browser-opacity/ 

[itsallaboutweb-blog]

Reset CSS

What is Reset CSS?

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules thatresets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser. (NB: article coming soon about why this is a false notion!)

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Reset CSS Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { top: 0; left: 0; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

 display: block;

}

body {

 line-height: 1;

}

ol, ul {

 list-style: none;

}

blockquote, q {

 quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

 content:''; content: none;

}

table {

 border-collapse:collapse; border-spacing:0;

}

References:

http://www.cssreset.com/what-is-a-css-reset/

http://meyerweb.com/eric/tools/css/reset/

[itsallaboutweb-blog]

CSS Hack for Opera

Opera

The key to targeting Opera browser, just combine this code (@media all and (min-width: 0px){ your style }) on your style. For example: (see the yellow marker below)

CSS Code:

body { background: #ffffff; } /* background color “WHITE" for other browsers */

@media all and (min-width: 0px){

   body {

      background: #ff0000; /* background color “RED" for Opera */

   }

}

[itsallaboutweb-blog]

CSS Hack for Mozilla Firefox

Mozilla Firefox

The key to targeting Mozilla Firefox browser, just combine this code (@-moz-document url-prefix() { your style }) on your style. For example: (see the yellow marker below)

CSS Code:

body { background: #ffffff; } /* background color “WHITE" for other browsers */

@-moz-document url-prefix() { 

   body {

      background: #ff0000; /* background color “RED" for M.Firefox */

   }

}

[itsallaboutweb-blog]

CSS Hack for Google Chrome and Safari

Google Chrome and Safari Browser

The key to targeting Google Chrome and Safari browser, just combine this code (@media screen and (-webkit-min-device-pixel-ratio:0) { your style }) on your style. For example: (see the yellow marker below)

CSS Code:

body { background: #ffffff; } /* background color “WHITE" for other browsers */

@media screen and (-webkit-min-device-pixel-ratio:0) {

   body {

      background: #ff0000; /* background color "RED" for G.Chrome and Safari browsers */

   }

}

[itsallaboutweb-blog]

CSS Hacks for Internet Explorer

Here's are the samples of CSS Hack for Internet Explorer from IE6 to IE9 version.

CSS Code:

body {

   background: #ff0000; /* for all browser */

   background: #0000ff\9; /* for IE9 & below */

   background: #00cc00\0/; /* for IE8 */

   background: *#ff9900; /* for IE7 */

   background: _#ff66ff; /* for IE6 */

}

Internet Explorer 9 & below

The key to targeting Internet Explorer 9 and below, with a hack is to append "\9" (backslash + nine) to end of your style, For example: (see the yellow marker below)

CSS Code:

body {

   background: #ff0000; /* for all browser - display "red" */

   background: #0000ff\9; /* for IE9 - display "blue" */

}

Internet Explorer 8 & below

The key to targeting Internet Explorer 8 and below, with a hack is to append "\0/" (backslash + zero + slash) to end of your style, For example: (see the yellow marker below)

CSS Code:

body {

   background: #ff0000; /* for all browser - display "red" */

   background: #00cc00\0/; /* for IE8 - display "green" */

}

Internet Explorer 7 & below

The key to targeting Internet Explorer 7 and below, just add "*" (asterisk) at the beginning of your style, For example: (see the yellow marker below)

CSS Code:

body {

   background: #ff0000; /* for all browser - display "red" */

   background: *#ff9900; /* for IE7 - display "orange" */

}

Internet Explorer 6 & below

The key to targeting Internet Explorer 6 and below, just add "_" (underscore) at the beginning of your style, For example: (see the yellow marker below)

CSS Code:

body {

   background: #ff0000; /* for all browser - display "red" */

   background: _#ff66ff; /* for IE6 - display "pink" */

}