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.
Aqua Utopia|海の底で記憶を紡ぐ
Alisa U Zemlji Chuda
taylor price
Sade Olutola

pixel skylines

titsay
No title available
ojovivo

Discoholic 🪩

JVL
almost home

祝日 / Permanent Vacation
Show & Tell

#extradirty
occasionally subtle
todays bird

Janaina Medeiros

@theartofmadeline
dirt enthusiast
Stranger Things

seen from United Kingdom
seen from United States

seen from United States
seen from Malaysia

seen from Canada

seen from Indonesia
seen from United States
seen from Singapore

seen from Malaysia

seen from Ireland

seen from Malaysia

seen from Malaysia
seen from United States

seen from Indonesia
seen from United States

seen from United States

seen from Malaysia

seen from Türkiye
seen from United States

seen from Malaysia
@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.
Freelance Front-End Web Developer - Lebanon
June - iPhone App Website Template by @JamiePeak on @creativemarket
A blog post about CSS3, HTML5, Flexbox and Layout from Greg Smith at Bocoup.
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
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...
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/
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/
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/
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/
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/
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 */
}
}
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 */
}
}
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 */
}
}
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" */
}