@RULES CHEATSHEET
Media Query
@media:
all: /*Used for all media type devices.*/
print: /*Used for printers.*/
screen: /*Used for computer screens, tablets, smart-phones etc.*/
speech: /*Used for a screenreader that "reads" the page out loud.*/
Feature Query
@supports:
Feature queries can be used to test if a browser is able to understand a CSS feature or not.
@supports (property: value): /*Checks if a property is supported.*/
@supports not (property: value) : /*Checks if a property is not supported*/
@supports (property1: value) and (property2: value): /*More than one property.*/
@supports (property1: value) or (property2: value): /*Supports one property or the other.*/
Import
@import:
The @import rule allows you to import a style sheet into another style sheet.
url|string: /*A url or a string representing the location of the resource to import.*/
list-of-mediaqueries: /*A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL*/
@import url|string list-of-mediaqueries;
Font-face
@font-face:
The @font-face rule allows custom fonts to be loaded on a webpage.
font-family: /*Required. Defines the name of the font.*/
font-stretch: /*Optional. Defines how the font should be stretched. Default value is "normal".*/
font-style: /*Optional. Defines how the font should be styled. Default value is "normal".*/
font-weight: /*Optional. Defines the boldness of the font. Default value is "normal".*/