CSS - CL3 Flashcards
CSS: W3C Specification and Browsers compatibility
https: //www.w3.org/TR/CSS2/
https: //www.quirksmode.org/dom/w3c_css.html
https: //caniuse.com/
CSS: Selectors performance
https: //csswizardry.com/2011/09/writing-efficient-css-selectors/
https: //www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/
CSS: For different media (printing, mobile etc.)
The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
CSS Syntax
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
meaning of the not, only and and keywords:
- not: The not keyword reverts the meaning of an entire media query.
- only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.
- and: The and keyword combines a media feature with a media type or other media features.
They are all optional. However, if you use not or only, you must also specify a media type.
You can also have different stylesheets for different media, like this:
Media Types - all Default. Used for all media type devices - print Used for printers - screen Used for computer screens, tablets, smart-phones etc. - speech Used for screenreaders that "reads" the page out loud
CSS Measures: Values, units, vh, vw, mm, inch, etc.
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: absolute and relative.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the “0” (zero)
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
% Relative to the parent element
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
CSS3: Multi-column Layout, Variables
CSS Multi-column Layout
The CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers
CSS Multi-column Properties In this chapter you will learn about the following multi-column properties: column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width
CSS Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into.
The following example will divide the text in the <div> element into 3 columns:
Example
div {
column-count: 3;
}
CSS Specify the Gap Between Columns
The column-gap property specifies the gap between the columns.
The following example specifies a 40 pixels gap between the columns:
Example
div {
column-gap: 40px;
}
CSS Column Rules
The column-rule-style property specifies the style of the rule between columns:
Example
div {
column-rule-style: solid;
}
The column-rule-width property specifies the width of the rule between columns
The column-rule-color property specifies the color of the rule between columns
The column-rule property is a shorthand property for setting all the column-rule-* properties above.
Specify How Many Columns an Element Should Span
The column-span property specifies how many columns an element should span across.
The following example specifies that the <h2> element should span across all columns:
Example
h2 {
column-span: all;
}
Specify The Column Width
The column-width property specifies a suggested, optimal width for the columns.
The following example specifies that the suggested, optimal width for the columns should be 100px:
Example
div {
column-width: 100px;
}
CSS Custom Properties (Variables) The var() function can be used to insert the value of a custom property.
The var() Function
Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.
The variable name must begin with two dashes (–) and is case sensitive!
The syntax of the var() function is as follows:
var(custom-name, value)
custom-name Required. The custom property’s name (must start with two dashes)
value Optional. The fallback value (used if the custom property is invalid)</h2></div>
Preprocessors: advanced using (functions: math, color, misc)
https://sass-lang.com/documentation/modules
Bootstrap/Foundation: custom build
https://getbootstrap.com/
Bootstrap/Foundation: alterniatives
https://getbootstrap.com/
CSS methodologies: diffs, proc and cons
https://codetheory.in/an-overview-of-oocss-bem-smacss/
