New elements in CSS3

Shadow Effect in CSS3

• -moz-box-shadow: 7px 7px 5px #999; /* For shadow effect to work in supported versions of Mozilla */

• -webkit-box-shadow: 7px 7px 7px #999; /* For shadow effect to work in supported versions of Safari */

- See more at: http://blog.jmwhite.co.uk/2009/04/19/the-shadow-effect-in-css3/#sthash.XSkRPqSa.dpuf

CSS3 rounded

.rounded_STYLE

{

background-color: COLOR; /* if needed */

border: 1px solid BORDER_COLOR; /* if needed */

-webkit-border-radius: RADIUS; /* for Safari */

-moz-border-radius: RADIUS; /* for Firefox */

}

http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/

Border-image

• border-image:• border-top-image• border-right-image• border-bottom-image• border-left-image• border-corner-image:• border-top-left-image• border-top-right-image• border-bottom-left-image• border-bottom-right-image

colored borders with CSS3

border: 8px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px15px;

Opacity Transition

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

RGBA colors

• CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba.

background: rgba(255, 0, 0, 0.2);

HSL Colors

• (Hue, Saturation, Lightness) values.

background-color: hsl(0,100%, 50%);

HSLA Colors

• As RGBA is to RGB, HSLA is to HSL; that is, it allows a fourth value, which sets the Opacity (via the Alpha channel)

CSS3 Attribute Selectors

The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.

• [att^=val] – the “begins with” selector

• [att$=val] – the “ends with” selector

• [att*=val] – the “contains” selecto

CSS3 Attribute Selectors

[att^=val] – the “begins with” selector

The Syntax• element[att^=val]

Examples• a[href^="http://"]

• p[title^="Hello"]

Other modules

• CSS3 Transitions

• media queries

• multi-column layout

• Web fonts

• speech

Multi-column layout

-moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em;

CSS3 Transitions

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

http://www.css3.info/preview/css3-transitions/

Web fonts with @font-face

• @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

CSS3 Speech

• #voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; } #voice-balance { -xv-voice-balance: left; } #speech-cue { cue-after: url(ding.wav); } #voice-rate { -xv-voice-rate: x-slow; } #voice-family { voice-family: female; } #voice-pitch { -xv-voice-pitch: x-low; } #speech-speak { speak: spell-out; }

Media Queries

Why Media Queries

• Change our layouts to fit the exact need of different devices without changing the content

• “One size fits all” Liquid, elastic and fixed width layouts

Why Media Queries cont.

• Just with CSS – no JavaScript

CSS media typesMedia Type Description

all Used for all media type devices

aural Used for speech and sound synthesizers

braille Used for braille tactile feedback devices

embossed Used for paged braille printers

handheld Used for small or handheld devices

print Used for printers

projection Used for projected presentations, like slides

screen Used for computer screens

tty Used for media using a fixed-pitch character grid, like teletypes and terminals

tv Used for television-type devices

http://www.w3.org/TR/CSS21/media.html

Specify Media

Method 1: <link> within HTML

You can use a <link> element in the head of your HTML document to specify the target media of an external style sheet. <link rel="stylesheet" href="a.css" type="text/css" media=”screen" />

Method 2: <?xml stylesheet> within XML

You can use <?xml-stylesheet ?> in the head of your XML document to specify the target media of an external style sheet. <?xml-stylesheetmedia="screen" rel="stylesheet" href="example.css" ?>

Specify Media

Method 3: @import within HTML

You can use @import in the head if your HTML document to specify the target media of an external style sheet. <style type="text/css" media="screen"> @import "a.css";</style>

Warning: @import should be avoided as it can cause issues in some versions of Internet Explorer. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Specify Media

Method 4: @import within CSS

You can specify the target medium within a CSS file using @import @import url("a.css") screen;

Media-types within @import rules are not supported by IE5, IE6 or IE7. The rule is ignored.

Method 5: @media within CSS

You can specify the target medium within a CSS file using @media @media screen { body { color: blue; } }

Media Queries cont…

• It’s a logical type (yes, No)

• If expression is true, it will apply to device

@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }

Element Queries

• Element queries are not part of any CSS Specification. They basically do not exist as of today. There are a couple of JavaScript-based polyfills involving various syntaxes, but there is still no draft for a native support.

SASS

SASS

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and

makes your stylesheets easier to organize and maintain.

SASS - Preprocessing

• When stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS

SASS - Variables

• Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

Sass CSS

$font-stack: Helvetica, sans-serif$primary-color: #333

bodyfont:100% $font-stackcolor: $primary-color

body { font: 100% Helvetica, sans-serif;color: #333; }

SASS - Nesting

• When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.

Sass CSS

navul margin: 0 padding: 0 list-style:none

li display: inline-block

a display: block padding: 6px 12pxtext-decoration: none

nav ul {margin: 0; padding: 0; list-style: none; }

nav li { display: inline-block; }

nav a { display: block; padding: 6px 12px;text-decoration: none; }

SASS - Partials

• You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

SASS - Import

• CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

Sass CSS

// _reset.sass html, body, ul, ol margin: 0padding: 0// base.sass @import reset body font:100% Helvetica, sans-serif background-color: #efefef

html, body, ul, ol { margin: 0; padding: 0;}

body { font: 100% Helvetica, sans-serif;background-color: #efefef; }

SASS - Mixins

• A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes

Sass CSS

=border-radius($radius) -webkit-border-radius: $radius -moz-border-radius:$radius -ms-border-radius: $radiusborder-radius: $radius

.box +border-radius(10px)

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius:10px; border-radius: 10px; }

SASS - Extend/Inheritance

• This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another.

Sass CSS

.message border: 1px solid #ccc padding:10px color: #333.success @extend

.message border-color: green

.error @extend .message border-color:red

.warning @extend .message border-color: yellow

.message, .success, .error, .warning {border: 1px solid #cccccc; padding: 10px;color: #333; }

.success { border-color: green; }

.error { border-color: red; }

.warning { border-color: yellow;

SASS - Operators

• Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.

Sass CSS

.container width: 100%

article[role="main"] float: left width:600px / 960px * 100%

aside[role="complimentary"] float: rightwidth: 300px / 960px * 100%

.container { width: 100%; }

article[role="main"] { float: left; width:62.5%; }

aside[role="complimentary"] { float:right; width: 31.25%; }

LESS

LESS

• Less (also known as LESS) is a dynamic stylesheet language that can be compiled into Cascading Style Sheets (CSS), or can run on the client-side and server-side.

• Less was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid Less code.

• The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).

Less

• Variables• Mixins• Nested rules• Media query bubbling and nested media queries• Operations• Functions• Namespaces and Accessors• Scope• Comments• Importing

SASS vs LESS

05/16/12 01/12/13 06/25/13

Number of open issues on LESS

392 112 142

Number of open issues on Sass

84 83 110

Pending pull requests on LESS

86 10 5

Pending pull requests on Sass

3 7 11

Number of commits in the last month in LESS

11 84 2

Number of commits in the last month in Sass

35 14 14

http://css-tricks.com/sass-vs-less/

Compass

• Compass is an open-source CSS Authoring Framework.

Browser Support

• http://caniuse.com/

• http://www.w3schools.com/cssref/css3_browsersupport.asp

• http://css3test.com/

• Media-types within @import rules are not supported by IE5, IE6 or IE7. The rule is ignored.

Frameworks

• Bootstrap

• Foundation

• Boilerplate

• Skeleton

Tools

Text Editors

• Sublime Text

Brackets

Other tools

• Yo

• Bower

• Grunt

• Phantom.js

• Jasmin

• Karma

Best Practice

Minimize HTTP Requests

• Combined files• CSS Sprites

• Image maps

• Inline images - This can increase the size of your HTML document.

• Convert to Base 64

• Use CDN

• Add an Expires or a Cache-Control Header• For static components: implement "Never expire" policy by setting far future

Expires header

• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests

• Gzip Components• Accept-Encoding: gzip, deflate

• Content-Encoding: gzip

• Put Stylesheets at the Top

• Put Scripts at the Bottom (if the script uses document.write to insert part of the page's content)

• Make JavaScript and CSS External

• Reduce DNS Lookups (add more hostnames)

• Minify JavaScript and CSS

• Avoid RedirectsHTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

• Remove Duplicate Scripts

• Reduce the Number of DOM Elements

• Split Components Across Domains

• Avoid Empty Image src

• Optimize CSS Sprites

• Minimize DOM Access

•

Others

• HTML5 Doctor CSS Reset - http://html5doctor.com/html-5-reset-stylesheet/

• Lazy loading