Liknande namn

• ASCII art
• ANSIBLE

Pryl

• Teleprinter

Konst

• ASCII art

Spel

• ASCIIDENT

Standardisering

ISO 8859-1

Koda domän till ASCII med PHP

idn_to_ascii('sökmotorn.se'); # xn--skmotorn-n4a.se

Exempel på Telnet

telnet towel.blinkenlights.nl

Citat

7 bitar ger 127 möjliga tecken

Filändelser

• .css

Prefix

• Vendor prefix

Element

• Pseudo

Enheter för värden

• %
• rem
• em
• px
• rem
• vh
• vw
• vmin
• vmax

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

Färger kan skrivas på flera olika sätt

• Name "red"
• Hex "#ff0000"
• Rgb "rgb(255,0,0)" (upp till 255)
• Rgba "rgba(255,0,0,0.5)" (för genomskinlighet)

Vendor prefix

• -webkit
• -moz
• -o
• -ms

@-rules

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

Nyheter i CSS 3

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

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' */

Ramverk

• BEM
• Less Css
• Sass
• Css 3 Pie
• Less framework
• Compass
• Shoelace
• Stylus
• tailwind CSS

Sass

• Preprocessing
• Variables
• Nesting
• Partials
• Import
• Mixins
• Extend/Inheritance
• Operators

Less

• Variables
• Mixins
• Nested rules
• Media query bubbling and nested media queries
• Operations
• Functions
• Namespaces and Accessors
• Scope
• Comments

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

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

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

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

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');

Filer

normalize.css reset.css

Skrivsätt med specialtecken

• = Tilldelning
• == Lika med
• === Exakt lika med
• != Inte lika med
• !== Inte exakt lika med
• > Större än
• < Mindre än
• >= Större än eller lika med
• <= Mindre än eller lika med
• && Och
• || Eller
• ++ Plus ett
• -- Minus ett
• +=
• .=

Specialtecken

• ≠

Bok

• Cool coding

Liknande namn

• Operatörer

Kolla om en array är tom med Javascript

[] == false // true

Omvandla en variabel till en boolean med Javascript

!!variable