Uppdaterad 2025-02-10

CSS

Förkortningar

CSS - Cascading Stylesheet
WYSIWYG - What You See Is What You Get

BEM - Block Element Modifier
OOCSS - Object-Oriented CSS
SMACSS - Scalable and Modular Architecture for CSS

Namn och kodpunkt för ikoner från Font Awesome `4.7.0` (den sista versionen som var helt gratis)

fa-css3

Filändelser

.css

Prefix

Vendor prefix

Element

Pseudo

Syntax

selektor {
	egenskap: värde;
}

Enheter för värden

%
rem
em
px
rem
vh
vw
vmin
vmax

Can I use Viewport units: vw, vh, vmin, vmax

W3.org Style Examples units

Pseudo-element

:before
:after

:link
:visited
:hover
:active

:focus
:focus-ring

:lang
:has
:emptyt
:root
:first-line
:nth-child(2n+1)
:target
…

Selektorer

Shorthand

background
border
font
margin
padding

CSS kan användas på tre olika sätt i HTML

<link rel="stylesheet" href="stylesheet.css"> <style></style> <tagg style="">

Tagg i HTML

style

Attribut i HTML

style

class
id

Kommentarer

/* En kommentar */ Kopp med texten CSS is awesome

Färger kan skrivas på flera än ett sätt

Format för värde	Exempel på kod
Namn	`red`
HEX	`#ff0000`
RGB	`rgb(255,0,0)` (upp till 255)
RGBA (för genomskinlighet)	`rgba(255,0,0,0.5)`
HSL	`hsl()`

Vill du veta mer om färger, se vilka som finns namngivna och vilka som är webbsäkra? Läs mer på vår sida som handlar om färger.

Vendor prefix

-webkit
-moz
-o
-ms

@-rules

@font-face
@keyframes
@media
@supports
@import

Media Queries Level 5

Exempel på hur en media query för mörkt tema kan se ut i CSS

@media (prefers-color-scheme: dark) {

Exempel

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-filter: blur(2px);

box-sizing: border-box;
box-ordinal-group: 1;
clear: both;
float: none;
text-transform: capitalize;

align-items: center;
display: flex;
justify-content: center;

-moz-hyphens: auto;
word-wrap: break-word;
pointer-events: none;

mix-blend-mode: hard-light;
object-fit: cover;
text-overflow: ellipsis;
-webkit-overflow-scrolling: touch;
html {touch-action: manipulation;}
backdrop-filter: saturate(180%) blur(20px)
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%)

Nyheter i CSS 3

Animation
Transform (translate, rotate, scale)
Transition
Rounded corners
Shadow

Exempel på grid

display: grid;
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
grid-gap: 0 12px;

Styling för iOS Safari

-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */

Hämta beräknade regler från CSS för ett element med JavaScript

window.getComputedStyle(element)

Visa värde för en egenskap i CSS med JavaScript

beräknadeRegler.getPropertyValue('egenskap')

Sätt header för CSS med PHP

header('Content-Type: text/css');

Conditional CSS rule targeting Firefox Quantum

Targeting only Firefox with CSS

body::before {
  content: 'Not Fx';
}
@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }
  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}