This presentation below mentioned new css features: CSS Variables CSS Layout Case CSS Grid Feature Queries

1. New CSS Features

2. Agenda
NEW CSS FEATURES
• CSS Variables
• CSS Layout Case
• CSS Grid
• Feature Queries

3. CSS Variables
NEW CSS FEATURES
CSS variables are entities defined by CSS authors that contain
specific values to be reused throughout a document.

4. CSS Variables
NEW CSS FEATURES
Declaring a variable:
Using the variable:
The Syntax
element {
--main-bg-color: brown;
}
element {
background-color: var(--main-bg-color);
}
CSS variables are case-sensitive, and can not be empty.
"Invalid at computed-value time" and will default to initial
--foo:; is invalid
--foo: ; is valid
--foo ≠ --FOO
element {
--main-bg-color:42deg;
background-color: var(--main-bg-color);
}
//(invalid) = initial = transparent

5. CSS Variables
NEW CSS FEATURES
CSS variables can be set with fallbacks if the variable is not set.
CSS variables can not be concatenated.
Cont.
var(--color1, var(--color2, var(--color3, red)))
// No version of this will work
element {
--height: 100;
height : var(--height) + px;
}

6. CSS Variables
NEW CSS FEATURES
Browser Support

7. NEW CSS FEATURES
Web Layout

8. NEW CSS FEATURES
Web Layout
Web layouts re broken.
We’ve just refined
how we break them.

9. NEW CSS FEATURES
Web Layout
.container
.main-content .sidebar

10. NEW CSS FEATURES
Web Layout
.wrap
.main-content
.sidebar
.wrap {
border: 2px solid red;
}
.main-content {
background: blue;
}
.sidebar {
background: green;
}

11. NEW CSS FEATURES
Web Layout
.wrap
.main-content .sidebar
.wrap {
border: 2px solid red;
}
.main-content {
background: blue;
width: 45%;
float:left;
}
.sidebar {
background: green;
width: 45%;
float:right;
}

12. NEW CSS FEATURES
Web Layout
.wrap
.main-content .sidebar
.wrap {
border: 2px solid red;
}
.main-content {
background: blue;
width: 45%;
float:left;
}
.sidebar {
background: green;
width: 45%;
float:right;
}
/*Clearfix*/
.wrap:after {
content: "";
display: table;
clear:both;
}

13. NEW CSS FEATURES
Web Layout
.wrap
.main-content .sidebar
.wrap {
display: flex;
justify-content: space-between;
border: 2px solid red;
}
.main-content {
background: blue;
width: 45%;
}
.sidebar {
background: green;
width: 45%;
}

14. NEW CSS FEATURES
Web Layout
.wrap
.main-content .sidebar
.other-content

15. NEW CSS FEATURES
Web Layout
.wrap
.main-content .sidebar
.other-content
.wrap {
display: flex;
justify-content: space-between;
border: 2px solid red;
}
.container {
width: 45%;
}
.main-content {
background: blue;
}
.main-content {
background: purple;
}
.sidebar {
width: 45%;
background: green;
}
.container

16. NEW CSS FEATURES
Web Layout
.wrap
.main-content .sidebar
.other-content
.container
This is hack.
Float and flex force us to create
HTML clutter in the form of
wrappers like the .container
Element in the example

17. NEW CSS FEATURES
Web Layout
<h1 class="page-title"></h1>
</div class="container">
<main></main>
<div class="sidebar">
<header></header>
<section>
<aside></aside>
<footer></footer>
</section>
</div><!--sidebar-->
</div><!--container-->

18. NEW CSS FEATURES
Web Layout
<header></header>
<h1 class="page-title"></h1>
<main></main>
<aside></aside>
<footer></footer>
<h1 class="page-title"></h1>
</div class="container">
<main></main>
<div class="sidebar">
<header></header>
<section>
<aside></aside>
<footer></footer>
</section>
</div><!--sidebar-->
</div><!--container-->

19. NEW CSS FEATURES
Web Layout
Solution:
Two-dimensional
layout-in tool to
separate content and
presentation.
Problem:
Current tools for web
layout are content-out
and one-dimensional.

20. CSS Grid Layout
Grid terminology
• Grid container
• Grid item
• Grid line
• Grid cell
• Grid track
• Grid area
• Grid Gap
NEW CSS FEATURES

21. NEW CSS FEATURES
CSS Grid
<header
class="masthead"></header>
<h1 class="page-title"></h1>
<main class="main-content"></main>
<aside class="sidebar"></aside>
<footer class="footer"></footer>
Grid container
Element containing a grid,
defined by setting
display: grid;
<div class="site">
</div><!--site-->

22. NEW CSS FEATURES
CSS Grid
<header
class="masthead"></header>
<h1 class="page-title"></h1>
<main class="main-content"></main>
<aside class="sidebar"></aside>
<footer class="footer"></footer>
Grid item
Element that is a direct
descendant of grid
container.
<div class="site">
</div><!--site-->
<header class="masthead"></header>

23. NEW CSS FEATURES
CSS Grid
Grid line
Horizontal (row) or
vertical (column) line
separating the grid into
sections.

24. NEW CSS FEATURES
CSS Grid
Grid cell
The space between two
adjacent row and two
adjacent column grid
lines.

25. NEW CSS FEATURES
CSS Grid
Grid area
The total space
surrounded by four grid
lines. A grid area may be
comprised of any number
of grid cells.

26. NEW CSS FEATURES
CSS Grid
Grid track
The space between two
adjacent grid lines.

27. NEW CSS FEATURES
CSS Grid
Grid gap
• Empty space between
grid tracks.
• Commonly called
gutters.

28. NEW CSS FEATURES
CSS Grid
Grid gap
• Empty space between
grid tracks.
• Commonly called
gutters.

29. NEW CSS FEATURES
CSS Grid
Demo

30. CSS Grid Layout
• Browser Support
NEW CSS FEATURES

31. Feature Queries : the @support rule
NEW CSS FEATURES
• The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features.
• This is called a feature query.
• The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
@support not ( display: flex ) {
.block { display: table; }
}

32. Feature Queries : the @support rule
NEW CSS FEATURES
Browser support