The document discusses various new elements in CSS3 including shadow effects, rounded corners, border images, colored borders, opacity transitions, RGBA/HSLA colors, attribute selectors, multi-column layouts, transitions, web fonts, and media queries. It also covers CSS preprocessors like Sass and Less, adding variables, nesting, mixins and other features to make CSS more powerful and modular. Best practices for performance include minimizing HTTP requests, caching, browser support, frameworks and tools.

2. New elements in CSS3

3. 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

4. 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/

5. 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

6. 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 5px
15px;

7. 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>

8. 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);

9. HSL Colors
• (Hue, Saturation, Lightness) values.
background-color: hsl(0,100%, 50%);

10. 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)

11. 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

12. CSS3 Attribute Selectors
[att^=val] – the “begins with” selector
The Syntax
• element[att^=val]
Examples
• a[href^="http://"]
• p[title^="Hello"]

13. Other modules
• CSS3 Transitions
• media queries
• multi-column layout
• Web fonts
• speech

14. Multi-column layout
-moz-column-width: 13em; -webkit-column-width: 13em; -moz-
column-gap: 1em; -webkit-column-gap: 1em;

15. CSS3 Transitions
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
http://www.css3.info/preview/css3-transitions/

16. 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'); }

17. 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; }

18. Media Queries

19. 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

20. Why Media Queries cont.
• Just with CSS – no JavaScript

21. CSS media types
Media 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

22. 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-stylesheet
media="screen" rel="stylesheet" href="example.css" ?>

23. 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/

24. 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; } }

25. 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; } }

26. Element Queries

27. • 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.

28. SASS

29. 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.

30. 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

31. 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
body
font:100% $font-stack
color: $primary-color
body { font: 100% Helvetica, sans-serif;
color: #333; }

32. 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
nav
ul margin: 0 padding: 0 list-style:
none
li display: inline-block
a display: block padding: 6px 12px
text-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; }

33. 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.

34. 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: 0
padding: 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; }

35. 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: $radius
border-radius: $radius
.box +border-radius(10px)
.box { -webkit-border-radius: 10px; -moz-
border-radius: 10px; -ms-border-radius:
10px; border-radius: 10px; }

36. 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;

37. 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: right
width: 300px / 960px * 100%
.container { width: 100%; }
article[role="main"] { float: left; width:
62.5%; }
aside[role="complimentary"] { float:
right; width: 31.25%; }

38. LESS

39. 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.

40. • 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).

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

42. 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/

43. Compass

44. • Compass is an open-source CSS Authoring Framework.

45. Browser Support

46. • http://caniuse.com/
• http://www.w3schools.com/cssref/css3_browsersupport.asp
• http://css3test.com/

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

48. Frameworks

49. • Bootstrap
• Foundation
• Boilerplate
• Skeleton

50. Tools

51. Text Editors
• Sublime Text
Brackets

52. Other tools
• Yo
• Bower
• Grunt
• Phantom.js
• Jasmin
• Karma

53. Best Practice

54. Minimize HTTP Requests
• Combined files
• CSS Sprites
• Image maps
• Inline images - This can increase the size of your HTML document.
• Convert to Base 64

55. • 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

56. • 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

57. • Avoid Redirects
HTTP/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

58. • Avoid Empty Image src
• Optimize CSS Sprites
• Minimize DOM Access
•

59. Others

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