CSS 3 New Features and Uses

2.  CSS 3 Stands for Cascading Style Sheets Level
3.
 CSS 3 is actually not a replacement for CSS2.
 CSS 3 is actually an extension to the CSS 2.1
specification which was published May 1998.
 CSS 3 work began around the time the CSS 2
specification was published for
recommendation.
 Some of the earliest drafts were published June
1999.

3.  CSS 3 will extend the CSS 2.1 standard with
smaller specification documents called
“Modules.”
 The Good News: This overly preserves
backward compatibility with CSS 2.1. All
the features that are in CSS 2.1 will be in CSS
3.
 The Bad News: Browsers can pick and
choose which modules they want to adopt.
This creates a more chaotic development
environment and therefore slower adoption
rate.

4.  Different Modules have different adoption rates.
 Some have been pushed for recommendation by
the W3C, some have been dropped entirely.
 It is recommended to stay with W3C Recommended
(REC), Proposed Recommended (PR), and
Candidate Recommended (CR) modules for
production environments.
 Working drafts and Announcements should be
reconsidered for implementation into any
environment due to the early nature and instability
across browsers at this time.
 One important thing to remember: just because a
module has been pushed for recommendation,
doesn’t mean a browser will automatically adopt it.

5.  Alternate Row Styling
› :nth-child , :first-of-type, :last-of-type
 Examples
› Every odd element - :nth-child(odd)
› Every even element - :nth-child(even)
› Every third element - :nth-child(3n)
› Third element only - nth-child(3)
› First Two elements - :nth-child(-n+2)
› Last two elements - :nth-last-child(-n+2)
› Everything but first and last elements - :not(:first-
of-type):not(:last-of-type)

6.  Allows you to set conditional styles based
upon element attributes
 Examples
› [att^=val] – Represents an element with the att
attribute whose value begins with the ‘val’
prefix.
› [att$=val] - Represents an element with the att
attribute whose value ends with the ‘val’ suffix.
› [att*=val] - Represents an element with the att
attribute whose value contains at least one
instance of the substring ‘val’.

7.  :rgba
› RGB is already part of the CSS 2.1 spec, but
the new addition is the „a‟. It stands for
alpha. It allows you to set the opacity of the
particular element in question.

8.  :hsl & :hsla
› Along with RGB, you can now use Hue,
Saturation, and Lightness values.

9.  opacity:
› Allows you to set the opacity of an element.

10.  Opacity or RGBA?
› The opacity effect can be achieved with
both opacity and rgba. The key difference is
the opacity value sets for the element and
all of it‟s children. Rgba only sets the alpha
level of its current element.

11.  Multiple Backgrounds
› You can now specify multiple background
images in an element.
› Examples
 background-image: url(image-1.png),
url(image-2.png);
 background-position: center bottom, left top;

12.  background-size:
› Allows you to specify the size of the
background image in question

13.  border-image:
› Allows you to create image borders around
your elements.

14.  border-radius:
› Allows you to create rounded corners in your
elements

15.  box-shadow:
› Allows you to create a drop shadow effect
on your elements.

16.  Allows you to change styles of elements based
the width and height of the viewport.
 This allows you to dynamically change the style
of your page without changing the content.
 This will enable singular development across
devices, including mobile, by dynamically
changing how the style displays based upon
minimum and maximum widths of the viewport.
› @media all and (min-width: ) {…}
› @media all and (max-width: ) {…}

17.  There are also several „Profiles‟ designed
to suit different media.
› Print – Widely adopted. (LC) status.
› TV Profile – Meant to address the color
specifications tailored to the needs and
constraints of TV devices. (CR Status).
› Mobile Profile – Aimed at achieving
interoperability between full and constrained
mobile devices. (LC Status).

18.  Be weary of any module below
Candidate Recommendation in a
Production Environment.

19.  Think Progressive Enhancement
› Website and app visuals that are critical to
the user experience should not be
dependent on CSS3. CSS3 should be used to
enrich and enhance an already fully-
functional experience.

20.  Use Fallbacks
› Be sure to list the most important elements
first, so it serves as the fallback.
› Use alternate style sheets for different
browsers or browser-specific syntax as a
fallback when appropriate.

21.  Modernizr
› Modernizr is a javascript library that allows
you to use the features of HTML5 and CSS 3
while not sacrificing the compatibility of
older browsers.
› It is a great starting point for developers who
have projects or clients that “require” a
newer feature but still want to maintain
backward compatibility.

22.  This is by no means an exhaustive list of
everything CSS 3 can do.
 The development is gaining momentum,
so be sure to look for changes, new
modules, and enhancements in the
coming months.
 I encourage you to try out some of the
new features in CSS 3. You will be very
surprised at how far it has come.
 Thanks for listening!