Chapter 39: Columns

Section 39.1: Simple Example (column-count)

The CSS multi-column layout makes it easy to create multiple columns of text.

Code

<div id="multi-columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum</div>

.multi-columns {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

Result

Section 39.2: Column Width

The column-width property sets the minimum column width. If column-count is not defined the browser will make
as many columns as fit in the available width.

Code:

<div id="multi-columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum

GoalKicker.com – CSS Notes for Professionals 193

</div>

.multi-columns {
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
}

Result

GoalKicker.com – CSS Notes for Professionals 194

Chapter 40: Multiple columns
CSS allows to define that element contents wrap into multiple columns with gaps and rules between them.

Section 40.1: Create Multiple Columns

<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum.
</div>

CSS

.content {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

Section 40.2: Basic example

Consider the following HTML markup:

<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum.</p>
<p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.</p>
</section>

With the following CSS applied the content is split into three columns separated by a gray column rule of two pixels.

section {
columns: 3;
column-gap: 40px;
column-rule: 2px solid gray;
}

See a live sample of this on JSFiddle.

GoalKicker.com – CSS Notes for Professionals 195

Chapter 41: Inline-Block Layout
Section 41.1: Justified navigation bar
The horizontally justified navigation (menu) bar has some number of items that should be justified. The first (left)
item has no left margin within the container, the last (right) item has no right margin within the container. The
distance between items is equal, independent on the individual item width.

HTML
<nav>
<ul>
<li>abc</li>
<li>abcdefghijkl</li>
<li>abcdef</li>
</ul>
</nav>

CSS
nav {
width: 100%;
line-height: 1.4em;
}
ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
text-align: justify;
margin-bottom: -1.4em;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
display: inline-block;
}

Notes

The nav, ul and li tags were chosen for their semantic meaning of 'a list of navigation (menu) items'. Other
tags may also be used of course.
The :after pseudo-element causes an extra 'line' in the ul and thus an extra, empty height of this block,
pushing other content down. This is solved by the negative margin-bottom, which has to have the same
magnitude as the line-height (but negative).
If the page becomes too narrow for all the items to fit, the items will break to a new line (starting from the
right) and be justified on this line. The total height of the menu will grow as needed.

GoalKicker.com – CSS Notes for Professionals 196

Chapter 42: Inheritance
Section 42.1: Automatic inheritance
Inheritance the a fundamental mechanism of CSS by which the computed values of some properties of an element
are applied to its' children. This is particularly useful when you want to set a global style to your elements rather
than having to set said properties to each and every element in your markup.

Common properties that are automatically inherited are: font, color, text-align, line-height.

Assume the following stylesheet:

#myContainer {
color: red;
padding: 5px;
}

This will apply color: red not only to the <div> element but also to the <h3> and <p> elements. However, due to
the nature of padding its value will not be inherited to those elements.

<div id="myContainer">
<h3>Some header</h3>
<p>Some paragraph</p>
</div>

Section 42.2: Enforced inheritance

Some properties are not automatically inherited from an element down to its' children. This is because those
properties are typically desired to be unique to the element (or selection of elements) to which the property is
applied to. Common such properties are margin, padding, background, display, etc.

However, sometimes inheritance is desired anyway. To achieve this, we can apply the inherit value to the property
that should be inherited. The inherit value can be appied to any CSS property and any HTML element.

Assume the following stylesheet:

#myContainer {
color: red;
padding: 5px;
}
#myContainer p {
padding: inherit;
}

This will apply color: red to both the <h3> and <p> elements due to the inheritance nature of the color property.
However, the <p> element will also inherit the padding value from its' parent because this was specified.

<div id="myContainer">
<h3>Some header</h3>
<p>Some paragraph</p>
</div>

GoalKicker.com – CSS Notes for Professionals 197

Chapter 43: CSS Image Sprites
Section 43.1: A Basic Implementation
What's an image sprite?

An image sprite is a single asset located within an image sprite sheet. An image sprite sheet is an image file that
contains more than one asset that can be extracted from it.

For example:

The image above is an image sprite sheet, and each one of those stars is a sprite within the sprite sheet. These
sprite sheets are useful because they improve performance by reducing the number of HTTP requests a browser
might have to make.

So how do you implement one? Here's some example code.

HTML

<div class="icon icon1"></div>

<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
background: url(“icons-sprite.png”);
display: inline-block;
height: 20px;
width: 20px;
}
.icon1 {
background-position: 0px 0px;
}
.icon2 {
background-position: -20px 0px;
}
.icon3 {
background-position: -40px 0px;
}

By using setting the sprite's width and height and by using the background-position property in CSS (with an x and y
value) you can easily extract sprites from a sprite sheet using CSS.

GoalKicker.com – CSS Notes for Professionals 198

Chapter 44: Clipping and Masking
Parameter Details
A URL which can point to an inline SVG element (or) an SVG element in an external file that
clip-source
contains the clip path's definition.
Refers to one among inset(), circle(), ellipse() or polygon(). Using one of these
basic-shape functions the clipping path is defined. These shape functions work exactly the same way as
they do in Shapes for Floats
This can have one among content-box, padding-box, border-box, margin-box, fill-box,
stroke-box, view-box as values. When this is provided without any value for <basic-shape>,
clip-geometry-box
the edges of the corresponding box is used as the path for clipping. When used with a
<basic-shape>, this acts as the reference box for the shape.
mask-reference This can be none or an image or a reference URL to a mask image source.
This specifies how the mask should be repeated or tiled in the X and Y axes. The supported
repeat-style
values are repeat-x, repeat-y, repeat, space, round, no-repeat.
Can be alpha or luminance or auto and indicates whether the mask should be treated as a
alpha mask or a luminance mask. If no value is provided and the mask-reference is a direct
mask-mode
image then it would be considered as alpha mask (or) if the mask-reference is a URL then it
would be considered as luminance mask.
This specifies the position of each mask layer and is similar in behavior to the background-
position position property. The value can be provided in 1 value syntax (like top, 10%) or in 2 value
syntax (like top right, 50% 50%).
This specifies the box to which the mask should be clipped (mask painting area) or the box
which should be used as reference for the mask's origin (mask positioning area) depending
geometry-box on the property. The list of possible values are content-box, padding-box, border-box,
margin-box, fill-box, stroke-box, view-box. Detailed explanation of how each of those
values work is available in the W3C Spec.
This represents the size of each mask-image layer and has the same syntax as background-
bg-size size. The value can be length or percentage or auto or cover or contain. Length, percentage
and auto can either be provided as a single value or as one for each axis.
This can be any one among add, subtract, exclude, multiply per layer and defines the type
compositing-operator of compositing operation that should be used for this layer with those below it. Detailed
explanation about each value is available in the W3C Specs.

Section 44.1: Clipping and Masking: Overview and Dierence

With Clipping and Masking you can make some specified parts of elements transparent or opaque. Both can be
applied to any HTML element.

Clipping

Clips are vector paths. Outside of this path the element will be transparent, inside it's opaque. Therefore you can
define a clip-path property on elements. Every graphical element that also exists in SVG you can use here as a
function to define the path. Examples are circle(), polygon() or ellipse().

GoalKicker.com – CSS Notes for Professionals 199

Example
clip-path: circle(100px at center);

The element will be only visible inside of this circle, which is positioned at the center of the element and has a
radius of 100px.

Masking

Masks are similar to Clips, but instead of defining a path you define a mask what layers over the element. You can
imagine this mask as an image what consist of mainly two colors: black and white.

Luminance Mask: Black means the region is opaque, and white that it's transparent, but there is also a grey area
which is semi-transparent, so you are able to make smooth transitions.

Alpha Mask: Only on the transparent areas of the mask the element will be opaque.

This image for example can be used as a luminance mask to make for an element a very smooth transition from
right to left and from opaque to transparent.

The mask property let you specify the the mask type and an image to be used as layer.

Example
mask: url(masks.svg#rectangle) luminance;

An element called rectangle defined in masks.svg will be used as an luminance mask on the element.

GoalKicker.com – CSS Notes for Professionals 200

Section 44.2: Simple mask that fades an image from solid to
transparent
CSS
div {
height: 200px;
width: 200px;
background: url(http://lorempixel.com/200/200/nature/1);
mask-image: linear-gradient(to right, white, transparent);
}

HTML
<div></div>

In the above example there is an element with an image as its background. The mask that is applied on the image
(using CSS) makes it look as though it is fading out from left to right.

The masking is achieved by using a linear-gradient that goes from white (on the left) to transparent (on the right)
as the mask. As it is an alpha mask, image becomes transparent where the mask is transparent.

Output without the mask:

Output with the mask:

Note: As mentioned in remarks, the above example would work in Chrome, Safari and Opera only when used with
the -webkit prefix. This example (with a linear-gradient as mask image) is not yet supported in Firefox.

Section 44.3: Clipping (Circle)

CSS:
div{

GoalKicker.com – CSS Notes for Professionals 201

 width: 200px;
height: 200px;
background: teal;
clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML
<div></div>

This example shows how to clip a div to a circle. The element is clipped into a circle whose radius is 30% based on
the dimensions of the reference box with its center point at the center of the reference box. Here since no <clip-
geometry-box> (in other words, reference box) is provided, the border-box of the element will be used as the
reference box.

The circle shape needs to have a radius and a center with (x,y) coordinates:

circle(radius at x y)

View Example

Output:

Section 44.4: Clipping (Polygon)

CSS:
div{
width:200px;
height:200px;
background:teal;
clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:
<div></div>

In the above example, a polygonal clipping path is used to clip the square (200 x 200) element into a triangle shape.
The output shape is a triangle because the path starts at (that is, first coordinates are at) 0 0 - which is the top-left
corner of the box, then goes to 0 100% - which is bottom-left corner of the box and then finally to 100% 50% which is
nothing but the right-middle point of the box. These paths are self closing (that is, the starting point will be the
ending point) and so the final shape is that of a triangle.

This can also be used on an element with an image or a gradient as background.

View Example

GoalKicker.com – CSS Notes for Professionals 202

Output:

Section 44.5: Using masks to cut a hole in the middle of an

image
CSS
div {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/200/200/abstract/6);
mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check
remarks before using */
}

HTML

In the above example, a transparent circle is created at the center using radial-gradient and this is then used as a
mask to produce the effect of a circle being cut out from the center of an image.

Image without mask:

Image with mask:

GoalKicker.com – CSS Notes for Professionals 203

Section 44.6: Using masks to create images with irregular
shapes
CSS
div { /* check remarks before usage */
height: 200px;
width: 400px;
background-image: url(http://lorempixel.com/400/200/nature/4);
mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top
left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
mask-size: 75% 25%, 25% 25%, 100% 75%;
mask-position: bottom left, bottom right, top left;
mask-repeat: no-repeat;
}

HTML
<div></div>

In the above example, three linear-gradient images (which when placed in their appropriate positions would
cover 100% x 100% of the container's size) are used as masks to produce a transparent triangular shaped cut at the
bottom of the image.

Image without the mask:

Image with the mask:

GoalKicker.com – CSS Notes for Professionals 204

GoalKicker.com – CSS Notes for Professionals 205
Chapter 45: Fragmentation
Value Description
auto Default. Automatic page breaks
always Always insert a page break
avoid Avoid page break (if possible)
left Insert page breaks so that the next page is formatted as a left page
right Insert page breaks so that the next page is formatted as a right page
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Section 45.1: Media print page-break

@media print {
p {
page-break-inside: avoid;
}
h1 {
page-break-before: always;
}
h2 {
page-break-after: avoid;
}
}

This code does 3 things:

it prevents a page break inside any p tags, meaning a paragraph will never be broken in two pages, if
possible.
it forces a page-break-before in all h1 headings, meaning that before every h1 occurrence, there will be a
page break.
it prevents page-breaks right after any h2

GoalKicker.com – CSS Notes for Professionals 206

Chapter 46: CSS Object Model (CSSOM)
Section 46.1: Adding a background-image rule via the CSSOM
To add a background-image rule via the CSSOM, first get a reference to the rules of the first stylesheet:

var stylesheet = document.styleSheets[0].cssRules;

Then, get a reference to the end of the stylesheet:

var end = stylesheet.length - 1;

Finally, insert a background-image rule for the body element at the end of the stylesheet:

stylesheet.insertRule("body { background-image:
url('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico'); }", end);

Section 46.2: Introduction

The browser identifies tokens from stylesheet and coverts them into nodes which are linked into a tree structure.
The entire map of all the nodes with their associated styles of a page would be the CSS Object Model.

To display the webpage, a web browser takes following steps.

1. The web browser examines your HTML and builds the DOM (Document Object Model).
2. The web browser examines your CSS and builds the CSSOM (CSS Object Model).
3. The web browser combines the DOM and the CSSOM to create a render tree. The web browser displays your
webpage.

GoalKicker.com – CSS Notes for Professionals 207

Chapter 47: Feature Queries
Parameter Details
Evaluates true if the browser can handle the CSS rule. The parenthesis around the rule are
(property: value)
required.
and Returns true only if both the previous and next conditions are true.
not Negates the next condition
or Returns true if either the previous or next condition is true.
(...) Groups conditions

Section 47.1: Basic @supports usage

@supports (display: flex) {
/* Flexbox is available, so use it */
.my-container {
display: flex;
}
}

In terms of syntax, @supports is very similar to @media, but instead of detecting screen size and orientation,
@supports will detect whether the browser can handle a given CSS rule.

Rather than doing something like @supports (flex), notice that the rule is @supports (display: flex).

Section 47.2: Chaining feature detections

To detect multiple features at once, use the and operator.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {

/* Probably do some fancy 3d stuff here */
}

There is also an or operator and a not operator:

@supports (display: flex) or (display: table-cell) {

/* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
/* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

For the ultimate @supports experience, try grouping logical expressions with parenthesis:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or
(transform: translateX(1px)) {
/* ... */
}

This will work if the browser

1. Supports display: block AND zoom: 1, or

2. Supports display: flex AND NOT display: table-cell, or
3. Supports transform: translateX(1px).

GoalKicker.com – CSS Notes for Professionals 208

Chapter 48: Stacking Context
Section 48.1: Stacking Context
In this example every positioned element creates its own stacking context, because of their positioning and z-index
values. The hierarchy of stacking contexts is organized as follows:

Root
DIV #1
DIV #2
DIV #3
DIV #4
DIV #5
DIV #6

It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is
completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3
element is passed for stacking in the root element with respect to its sibling's DIV.

HTML:

<div id="div1">
<h1>Division Element #1</h1>
<code>position: relative;<br/>
z-index: 5;</code>
</div>
<div id="div2">
<h1>Division Element #2</h1>
<code>position: relative;<br/>
z-index: 2;</code>
</div>
<div id="div3">
<div id="div4">

GoalKicker.com – CSS Notes for Professionals 209

 <h1>Division Element #4</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>
<h1>Division Element #3</h1>
<code>position: absolute;<br/>
z-index: 4;</code>
<div id="div5">
<h1>Division Element #5</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</div>

CSS:

* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
}
#div1,
#div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 190px;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4,

GoalKicker.com – CSS Notes for Professionals 210

#div5 {
border: 1px dashed #996;
background-color: #ffc;
}
#div4 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}

Result:

Source:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context.

GoalKicker.com – CSS Notes for Professionals 211

Chapter 49: Block Formatting Contexts
Section 49.1: Using the overflow property with a value
dierent to visible
img{
float:left;
width:100px;
margin:0 10px;
}
.div1{
background:#f1f1f1;
/* does not create block formatting context */
}
.div2{
background:#f1f1f1;
overflow:hidden;
/* creates block formatting context */
}

https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/

Using the overflow property with a value different to visible (its default) will create a new block formatting
context. This is technically necessary — if a float intersected with the scrolling element it would forcibly
rewrap the content.

This example that show how a number of paragraphs will interact with a floated image is similar to this example, on
css-tricks.com.

2: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow MDN

GoalKicker.com – CSS Notes for Professionals 212

Chapter 50: Vertical Centering
Section 50.1: Centering with display: table
HTML:

<div class="wrapper">
<div class="outer">
<div class="inner">
centered
</div>
</div>
</div>

CSS:

.wrapper {
height: 600px;
text-align: center;
}
.outer {
display: table;
height: 100%;
width: 100%;
}
.outer .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}

Section 50.2: Centering with Flexbox

HTML:

<div class="container">
<div class="child"></div>
</div>

CSS:

.container {
height: 500px;
width: 500px;
display: flex; // Use Flexbox
align-items: center; // This centers children vertically in the parent.
justify-content: center; // This centers children horizontally.
background: white;
}

.child {
width: 100px;
height: 100px;
background: blue;
}

GoalKicker.com – CSS Notes for Professionals 213

Section 50.3: Centering with Transform
HTML:

<div class="wrapper">
<div class="centered">
centered
</div>
</div>

CSS:

.wrapper {
position: relative;
height: 600px;
}
.centered {
position: absolute;
z-index: 999;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

Section 50.4: Centering Text with Line Height

HTML:

<div class="container">
<span>vertically centered</span>
</div>

CSS:

.container{
height: 50px; /* set height */
line-height: 50px; /* set line-height equal to the height */
vertical-align: middle; /* works without this rule, but it is good having it explicitly set */
}

Note: This method will only vertically center a single line of text. It will not center block elements correctly and if the
text breaks onto a new line, you will have two very tall lines of text.

Section 50.5: Centering with Position: absolute

HTML:

<div class="wrapper">
<img
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

CSS:

.wrapper{
position:relative;

GoalKicker.com – CSS Notes for Professionals 214

 height: 600px;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

If you want to center other then images, then you must give height and width to that element.

HTML:

<div class="wrapper">
<div class="child">
make me center
</div>
</div>

CSS:

.wrapper{
position:relative;
height: 600px;
}
.wrapper .child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 30px;
border: 1px solid #f00;
}

Section 50.6: Centering with pseudo element

HTML:

<div class="wrapper">
<div class="content"></div>
</div>

CSS:

.wrapper{
min-height: 600px;
}

.wrapper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}

GoalKicker.com – CSS Notes for Professionals 215

.content {
display: inline-block;
height: 80px;
vertical-align: middle;
}

This method is best used in cases where you have a varied-height .content centered inside .wrapper; and you
want .wrapper's height to expand when .content's height exceed .wrapper's min-height.

GoalKicker.com – CSS Notes for Professionals 216

Chapter 51: Object Fit and Placement
Section 51.1: object-fit
The object-fit property will defines how an element will fit into a box with an established height and width. Usually
applied to an image or video, Object-fit accepts the following five values:

FILL

object-fit:fill;

Fill stretches the image to fit the content box without regard to the image's original aspect ratio.

CONTAIN

object-fit:contain;

Contain fits the image in the box's height or width while maintaining the image's aspect ratio.

COVER

object-fit:cover;

GoalKicker.com – CSS Notes for Professionals 217

Cover fills the entire box with the image. The image aspect ratio is preserved, but the image is cropped to the
dimensions of the box.

NONE

object-fit:none;

None ignores the size of the box and is not resized.

SCALE-DOWN

object-fit:scale-down;

Scale-down either sizes the object as none or as contain. It displays whichever option results in a smaller image
size.

GoalKicker.com – CSS Notes for Professionals 218

GoalKicker.com – CSS Notes for Professionals 219
Chapter 52: CSS design patterns
These examples are for documenting CSS-specific design patterns like BEM, OOCSS and SMACSS.

These examples are NOT for documenting CSS frameworks like Bootstrap or Foundation.

Section 52.1: BEM

BEM stands for Blocks, Elements and Modifiers. It's a methodology initially conceived by Russian tech company
Yandex, but which gained quite some traction among American & Western-European web developers as well.

As the same implies, BEM metholology is all about componentization of your HTML and CSS code into three types
of components:

Blocks: standalone entities that are meaningful on their own

Examples are header, container, menu, checkbox & textbox

Elements: Part of blocks that have no standalone meaning and are semantically tied to their blocks.

Examples are menu item, list item, checkbox caption & header title

Modifiers: Flags on a block or element, used to change appearance or behavior

Examples are disabled, highlighted, checked, fixed, size big & color yellow

The goal of BEM is to keep optimize the readability, maintainability and flexibility of your CSS code. The way to
achieve this, is to apply the following rules.

Block styles are never dependent on other elements on a page

Blocks should have a simple, short name and avoid _ or - characters
When styling elements, use selectors of format blockname__elementname
When styling modifiers, use selectors of format blockname--modifiername and blockname__elementname--
modifiername
Elements or blocks that have modifiers should inherit everything from the block or element it is modifying
except the properties the modifier is supposed to modify

Code example

If you apply BEM to your form elements, your CSS selectors should look something like this:

.form { } // Block
.form--theme-xmas { } // Block + modifier
.form--simple { } // Block + modifier
.form__input { } // Block > element
.form__submit { } // Block > element
.form__submit--disabled { } // Block > element + modifier

The corresponding HTML should look something like this:

GoalKicker.com – CSS Notes for Professionals 220

<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>

GoalKicker.com – CSS Notes for Professionals 221

Chapter 53: Browser Support & Prefixes
Prefix Browser(s)
-webkit- Google Chrome, Safari, newer versions of Opera 12 and up, Android, Blackberry and UC browsers
-moz- Mozilla Firefox
-ms- Internet Explorer, Edge
-o-
, -xv-
Opera until version 12

-khtml- Konquerer

Section 53.1: Transitions

div {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}

Section 53.2: Transform

div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

GoalKicker.com – CSS Notes for Professionals 222

Chapter 54: Normalizing Browser Styles
Every browser has a default set of CSS styles that it uses for rendering elements. These default styles may not be
consistent across browsers because: the language specifications are unclear so base styles are up for
interpretation, browsers may not follow specifications that are given, or browsers may not have default styles for
newer HTML elements. As a result, people may want to normalize default styles across as many browsers as
possible.

Section 54.1: normalize.css

Browsers have a default set of CSS styles they use for rendering elements. Some of these styles can even be
customised using the browser's settings to change default font face and size definitions, for example. The styles
contain the definition of which elements are supposed to be block-level or inline, among other things.

Because these default styles are given some leeway by the language specifications and because browsers may not
follow the specs properly they can differ from browser to browser.

This is where normalize.css comes into play. It overrides the most common inconsistencies and fixes known bugs.

What does it do

Preserves useful defaults, unlike many CSS resets.

Normalizes styles for a wide range of elements.
Corrects bugs and common browser inconsistencies.
Improves usability with subtle modifications.
Explains what code does using detailed comments.

So, by including normalize.css in your project your design will look more alike and consistent across different
browsers.

Difference to reset.css

You may have heard of reset.css. What's the difference between the two?

While normalize.css provides consistency by setting different properties to unified defaults, reset.css achieves
consistency by removing all basic styling that a browser may apply. While this might sound like a good idea at first,
this actually means you have to write all rules yourself, which goes against having a solid standard.

Section 54.2: Approaches and Examples

CSS resets take separate approaches to browser defaults. Eric Meyer’s Reset CSS has been around for a while. His
approach nullifies many of the browser elements that have been known to cause problems right off the back. The
following is from his version (v2.0 | 20110126) CSS Reset.

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,

GoalKicker.com – CSS Notes for Professionals 223

article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

Eric Meyer's Reset CSS

Normalize CSS on the other and deals with many of these separately. The following is a sample from the version
(v4.2.0) of the code.

/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/

/* Document
========================================================================== */

html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
========================================================================== */

/**
* Remove the margin in all browsers (opinionated).
*/

body {
margin: 0;
}

/**
* Add the correct display in IE 9-.
*/

article,
aside,
footer,
header,
nav,
section {
display: block;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

GoalKicker.com – CSS Notes for Professionals 224

h1 {
font-size: 2em;
margin: 0.67em 0;
}

Normalize CSS

GoalKicker.com – CSS Notes for Professionals 225

Chapter 55: Internet Explorer Hacks
Section 55.1: Adding Inline Block support to IE6 and IE7
display: inline-block;

The display property with the value of inline-block is not supported by Internet Explorer 6 and 7. A work-around
for this is:

zoom: 1;
*display: inline;

The zoom property triggers the hasLayout feature of elements, and it is available only in Internet Explorer. The
*display makes sure that the invalid property executes only on the affected browsers. Other browsers will simply
ignore the rule.

Section 55.2: High Contrast Mode in Internet Explorer 10 and

greater
In Internet Explorer 10+ and Edge, Microsoft provides the -ms-high-contrast media selector to expose the "High
Contrast" setting from the browser, which allows the programmer to adjust their site's styles accordingly.

The -ms-high-contrast selector has 3 states: active, black-on-white, and white-on-black. In IE10+ it also had a
none state, but that is no longer supported in Edge going forward.

Examples
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
.header{
background: #fff;
color: #000;
}
}

This will change the header background to white and the text color to black when high contrast mode is active and
it is in black-on-white mode.

@media screen and (-ms-high-contrast: white-on-black) {

.header{
background: #000;
color: #fff;
}
}

Similar to the first example, but this specifically selects the white-on-black state only, and inverts the header colors
to a black background with white text.

More Information:

Microsoft Documentation on -ms-high-contrast

GoalKicker.com – CSS Notes for Professionals 226

Section 55.3: Internet Explorer 6 & Internet Explorer 7 only
To target Internet Explorer 6 and Internet Explorer 7, start your properties with *:

.hide-on-ie6-and-ie7 {
*display : none; // This line is processed only on IE6 and IE7
}

Non-alphanumeric prefixes (other than hyphens and underscores) are ignored in IE6 and IE7, so this hack works for
any unprefixed property: value pair.

Section 55.4: Internet Explorer 8 only

To target Internet Explorer 8, wrap your selectors inside @media \0 screen { }:

@media \0 screen {
.hide-on-ie8 {
display : none;
}
}

Everything between @media \0 screen { } is processed only by I

GoalKicker.com – CSS Notes for Professionals 227

Chapter 56: Performance
Section 56.1: Use transform and opacity to avoid trigger
layout
Changing some CSS attribute will trigger the browser to synchronously calculate the style and layout, which is a bad
thing when you need to animate at 60fps.

DON'T

Animate with left and top trigger layout.

#box {
left: 0;
top: 0;
transition: left 0.5s, top 0.5s;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
}

#box.active {
left: 100px;
top: 100px;
}

Demo took 11.7ms for rendering, 9.8ms for painting

GoalKicker.com – CSS Notes for Professionals 228

DO

Animate with transform with the same animation.

#box {
left: 0;
top: 0;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;

transition: transform 0.5s;

transform: translate3d(0, 0, 0);
}

#box.active {

GoalKicker.com – CSS Notes for Professionals 229

 transform: translate3d(100px, 100px, 0);
}

Demo same animation, took 1.3ms for rendering, 2.0ms for painting.

GoalKicker.com – CSS Notes for Professionals 230

Credits
Thank you greatly to all the people from Stack Overflow Documentation who helped provide this content,
more changes can be sent to web@petercv.com for new content to be published or updated

AB Chapter 20
A.J Chapter 4
Aaron Chapter 4
abaracedo Chapter 4
Abhishek Singh Chapter 22
adamboro Chapter 1
Aeolingamenfel Chapters 27 and 55
Ahmad Alfy Chapters 4, 5 and 16
Alohci Chapter 15
amflare Chapters 13 and 17
Andre Lopes Chapter 44
andre mcgruder Chapter 54
andreas Chapters 15 and 38
Andrew Chapters 12, 19 and 53
Andrew Myers Chapter 47
Anil Chapter 4
animuson Chapters 4, 50 and 53
apaul Chapters 6 and 27
Araknid Chapter 4
Arif Chapter 11
Arjan Einbu Chapters 4, 7, 8, 15 and 17
Ashwin Ramaswami Chapters 1 and 4
Asim K T Chapters 5 and 16
AVAVT Chapter 50
awe Chapter 1
bdkopen Chapter 3
Ben Rhys Chapter 5
Bipon Chapter 40
BiscuitBaker Chapter 7
Boris Chapter 5
Boysenb3rry Chapter 1
brandaemon Chapter 17
Brett DeWoody Chapters 18, 38 and 39
CalvT Chapters 5 and 9
Casey Chapter 11
Cassidy Williams Chapters 10 and 22
cdm Chapters 5 and 8
Charlie H Chapters 4 and 28
Chathuranga Jayanath Chapters 11, 13 and 23
Chiller Chapter 38
Chris Chapters 1, 4, 23, 25, 42 and 50
Chris Spittles Chapters 8 and 24
Christiaan Maks Chapter 28
CocoaBean Chapter 5
coderfin Chapter 3
cone56 Chapters 31 and 36
CPHPython Chapter 4

GoalKicker.com – CSS Notes for Professionals 231

csx.cc Chapter 1
cuervoo Chapter 18
Daniel G. Blázquez Chapter 5
Daniel Käfer Chapter 6
Daniel Stradowski Chapter 5
DarkAjax Chapter 17
darrylyeo Chapters 2, 13 and 18
Darthstroke Chapter 5
Dave Everitt Chapter 4
David Fullerton Chapter 4
Demeter Dimitri Chapter 4
demonofthemist Chapter 14
designcise Chapters 4, 5 and 18
Devid Farinelli Chapters 4 and 6
Devon Bernard Chapter 4
Dex Star Chapter 27
Diego V Chapter 6
Dinidu Hewage Chapter 4
dippas Chapters 4, 17 and 21
doctorsherlock Chapter 10
dodopok Chapters 13, 36 and 45
Elegant.Scripting Chapter 43
Eliran Malka Chapter 6
Emanuele Parisio Chapter 6
Evgeny Chapter 15
Farzad YZ Chapter 6
fcalderan Chapter 5
feeela Chapters 46 and 55
FelipeAls Chapters 1, 5, 10, 11, 14, 16, 24 and 25
Felix A J Chapter 15
Felix Edelmann Chapter 4
Felix Schütz Chapter 4
Forty Chapter 4
fracz Chapter 4
fzzylogic Chapter 16
G Chapters 1 and 17
Gabriel R. Chapter 1
gandreadis Chapter 4
geek1011 Chapter 21
geeksal Chapter 17
Gerardas Chapter 1
Gnietschow Chapter 10
GoatsWearHats Chapter 1
Gofilord Chapter 21
Grant Palin Chapter 54
H. Pauwelyn Chapters 4, 18 and 36
HansCz Chapter 4
Harish Gyanani Chapter 1
Harry Chapters 10, 26, 28, 29, 33, 35 and 44
henry Chapter 4
Horst Jahns Chapter 5
Hristo Chapter 32
Hugo Buff Chapter 4

GoalKicker.com – CSS Notes for Professionals 232

Hynes Chapters 4, 5 and 15
insertusernamehere Chapter 15
J Atkin Chapters 1 and 4
JF Chapters 4 and 20
Jacob Gray Chapters 4, 5 and 22
James Donnelly Chapters 7 and 17
James Taylor Chapter 5
jaredsk Chapters 10, 36 and 50
JedaiCoder Chapter 6
Jef Chapter 16
Jeffery Tang Chapter 30
jehna1 Chapter 6
jgh Chapter 12
JHS Chapter 25
Jmh2013 Chapters 13, 23 and 43
joejoe31b Chapters 4 and 13
JoelBonetR Chapter 4
joe_young Chapters 1 and 15
John Slegers Chapters 4, 5, 6, 13, 17, 18, 28, 52 and 55
Jon Chan Chapters 5 and 15
Jonathan Argentiero Chapter 6
Jonathan Lam Chapters 1, 6, 7, 16 and 22
Jonathan Zúñiga Chapter 5
Jose Gomez Chapter 1
Just a student Chapter 1
Kevin Katzke Chapter 23
kingcobra1986 Chapter 17
Kuhan Chapter 18
Kyle Ratliff Chapter 6
leo_ap Chapter 50
LiLacTac Chapter 55
Luka Kerr Chapter 29
Luke Taylor Chapter 28
Madalina Taina Chapters 4, 5, 6, 8, 9, 10, 11, 12, 14, 15, 19, 25, 29, 31, 32, 34, 39, 45 and 49
Marc Chapter 20
Marcatectura Chapter 21
Marjorie Pickard Chapter 2
Mark Perera Chapter 4
Marten Koetsier Chapters 34 and 41
Matas Vaitkevicius Chapters 4 and 13
Mattia Astorino Chapter 22
Maximillian Laumeister Chapters 5 and 13
Maxouhell Chapter 6
Michael Moriarty Chapters 5, 15 and 18
Michael_B Chapters 4 and 6
Mifeet Chapter 6
Mike McCaughan Chapter 24
Miles Chapters 12 and 51
Miro Chapter 18
MMachinegun Chapter 54
mmativ Chapter 50
Mod Proxy Chapter 6
Mr. Alien Chapter 5

GoalKicker.com – CSS Notes for Professionals 233

Mr. Meeseeks Chapter 29
Mr_Green Chapter 8
Muthu Kumaran Chapter 37
Naeem Shaikh Chapter 4
Nate Chapter 5
Nathan Arthur Chapters 1, 4, 6, 8, 13, 14, 15 and 16
Nemanja Trifunovic Chapter 48
Niek Brouwer Chapter 23
niyasc Chapter 18
Nobal Mohan Chapter 10
o.v. Chapter 6
Obsidian Chapters 37 and 53
Ortomala Lokni Chapters 6, 7 and 17
Pat Chapter 21
patelarpan Chapters 1 and 50
Paul Kozlovitch Chapter 6
Paul Sweatte Chapter 46
Persijn Chapters 4 and 5
Phil Chapter 50
pixelbandito Chapter 9
Praveen Kumar Chapters 4, 6, 13, 15, 26, 28, 50 and 55
Qaz Chapter 12
Rahul Nanwani Chapter 22
RamenChef Chapter 43
rdans Chapter 4
RedRiderX Chapter 37
rejnev Chapter 8
Richard Hamilton Chapters 4, 5, 15, 18, 20 and 27
Rion Williams Chapter 4
rishabh dev Chapter 46
rmondesilva Chapters 15 and 20
Robotnicka Chapter 20
Rocket Risa Chapter 1
Sandeep Tuniki Chapter 6
Saroj Sasmal Chapter 1
ScientiaEtVeritas Chapters 1, 4, 6, 7, 10, 11, 18, 20, 21, 23, 26, 31, 33, 44 and 53
Sebastian Zartner Chapter 40
SeinopSys Chapters 18, 23, 36 and 54
Sergey Denisov Chapters 5 and 26
Shaggy Chapters 5, 21 and 53
Siavas Chapter 6
Someone Chapter 6
Sourav Ghosh Chapters 5 and 22
Squazz Chapters 16 and 31
srikarg Chapter 13
StefanBob Chapter 9
Stewartside Chapters 4, 5, 6, 18, 20 and 21
Stratboy Chapter 5
sudo bangbang Chapter 4
Sumner Evans Chapter 4
Sun Qingyao Chapter 8
Sunnyok Chapters 4, 6 and 8
Sverri M. Olsen Chapter 1

GoalKicker.com – CSS Notes for Professionals 234

takeradi Chapter 16
Taylor Chapter 6
Ted Goas Chapters 12, 15, 34 and 43
Teo Dragovic Chapters 1 and 13
ThatWeirdo Chapter 4
TheGenie OfTruth Chapter 36
Theodore K. Chapter 22
think123 Chapter 5
Timothy Miller Chapter 55
Toby Chapters 15 and 20
Todd Chapter 1
ToniB Chapter 15
Tot Zam Chapter 8
Trevor Clarke Chapters 5, 8, 10 and 15
TrungDQ Chapter 56
TylerH Chapters 1, 4, 5, 36 and 53
Ulrich Schwarz Chapter 43
user007 Chapter 18
user2622348 Chapter 20
vishak Chapter 14
vkopio Chapter 7
Vlusion Chapter 15
Volker E. Chapter 15
web Chapters 6, 26, 28, 29 and 44
Will DiFruscio Chapter 9
Wolfgang Chapter 18
X Chapter 18
Xinyang Li Chapter 1
xpy Chapter 4
Yury Fedorov Chapter 4
Zac Chapters 5 and 12
Zaffy Chapter 4
Zakaria Acharki Chapter 20
Zaz Chapter 4
Ze Rubeus Chapter 4
zeel Chapter 6
zer00ne Chapter 20
Zeta Chapter 5
Zze Chapter 5

GoalKicker.com – CSS Notes for Professionals 235

You may also like