© Nadav Sinai 2016
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
HTML
CSS
HTML is transformed to DOM
CSS is transformed to CSSOM
Both are combined to Render Tree
selector {property : value}
selector1 selector2, selector1 selector3 {
property:value;
}
@direction argument
@direction argument (conditional_argument:value) AND (conditional_argument:value) {
block_selector {
property : value;
}
}
CSS styles can be specified in many ways, but they will all cascade into one style sheet in the end.
Application method matters
Selectors have different weight
Combining selectors makes selector more specific,
div.container {
z-index:1;
}
body div.container {
z-index:10;
}
html body div.conatiner {
z-index:100;
}
.container {
z-index:1000!important;
}
Action state or media state add to selectivity
div.container {
z-index:1;
}
div.container:hover {
z-index:10;
}
@media screen {
div.container{
z-index:100;
}
}
During the cascade, property values are resolved tocomputed values. Some of these values are inherited from its parent’s element in the document tree.
<p style="color: red; border: 1px solid #000;"><q><span>red text</span></q></p>
red text
For each element in the document a "box model" is calculated accounting its size in pixels
For each element in the document a "box model" is calculated accounting its size in pixels
Initial render is always so
But repaints which try to happens 60 times a second, may skip some of the steps if the browser realizes nothing changed
CSS values can be changed via JS, media queries, user actions and animations. some CSS properties require Layout and repaint, some do not
CSS 3 box-sizing property
CSS 3 box-sizing property
display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline.
display: block;
display:block
display:block
display:block
display: inline-block;
display:inline-block
display:inline-block
display:inline-block
display: inline-block;
display:inline
display:inline
display
:inline
display: table
display:table
display:table-row
display:table-row
display:table-cell
display:table-cell
display: flex
producing complex layouts with css was difficult and a new model was needed, flexbox is the new way to do layouts, now made even more as browser support is ~96%
Floats were initially made to allow text to wrap around an image
but were soon adopted as a layout tool (sidebars, navigation bars etc)
float makes block elements behave more like inline-block, but there are some differences:
margin can be used to center elements HORIZENTALY in container
text-align is used to center internal text
vertical-alignment is used in inline elements only
the simplest unit is obviously the pixel (px) but it is not really absolute screen pixels- some devices have DPR (Device pixel ratio)
we gain better control when using relative units -
em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
rem | Relative to font-size of the root element |
vw | Relative to 1% of the width of the viewport |
vh | Relative to 1% of the height of the viewport |
vmin | Relative to 1% of viewport's* smaller dimension |
vmax | Relative to 1% of viewport's* larger dimension |
% | Percent of default size (font size in p tag 100% =16px) |
Position changes the layout drastically possible values:
static | Default value. Elements render in order, as they appear in the document flow |
---|---|
relative | The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position< |
absolute | The element is positioned relative to its first positioned (not static) ancestor element |
fixed | The element is positioned relative to the browser window |
Overflow property
text-overflow property
left,right,top & bottom properties allow to change the element's position in relative and absolute positioning
this affects other elements in the layout
the transform property allows to change element's geometry in the composition stage
so while
and
look like they do the same thing they are different
this is particularly important for animations
.demo {left:10px;}
.demo {transform:translate-x(10px);}
will-change more info
The browser is smart to separate some elements to groups and to re-layout and re-paint only relevant groups.
we can help the browser know things will be repainted often (and make the browser promote element to a layer) via the will-change: property
layers more info
core features
variables are used/assigned with $ prefix, types are interfered.
variables can have default values using !default
//colors.scss
$btnColor:#22ddee;
//button.scss
$btnColor:#ddffee!default;
.btn{
color:$btnColor
}
///main.css
@import "colors.scss";
@import "button.scss";
//compiled
.btn{
color:#22ddee;
}
simple functions can be declared using @mixin
//declration
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
//use
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
//compiled
.page-title {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
mixins can have arguments and default values
@mixin sexy-border($color, $width:10px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
there are also functions
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
one can keep DRY with @extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
//compiled
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
//general style
require('../common/template/general.scss'); //will be moved to head as css
@Component({
styles:[require('./my.component.scss')] // will be processed and exported as string -> .compoennt.scss
})
export class MyComponent{
}