AT-regler / @-regler

@-regler fortæller CSS hvad der skal udføres eller hvordan der skal ageres.

- hvad der skal udføres eller
- hvordan der skal ageres

Regulære regler

@[KEYWORD] (RULE);

@charset

@charset ;

Det karaktersæt der er anvendt ved opbygningen af CSS-filen. Det indebærer, at æ, ø og å bør kunne anvendes. Alligevel bør de undgås. Kun det først anførte charset anvendes.

Skal indsættes fra CSS-filens linie 1 position 1.

Når browseren skal bestemme det kar.sæt den skal anvende, vælger den det første fra:

- The value of the Unicode byte-order character placed at the beginning of the file

- <meta charset="UTF-8" /> i HTML-filernes HEAD-del.

- @charset i CSS-filen

- Anvender default "UTF-8".

Eksempler

@charset "UTF-8"

@charset 'iso-8859-15'

@import

@import @import url; @import url list-of-media-queries;;

Fast indsættelse af 'sekundært' stylesheet ind i 'primært' stylesheet. @import skal placeres umiddelbart efter @-charset reglen.

Kan ikke indsættes i conditional @-regler.

Eksempler:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

@namespace

@namespace @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg);

URL til det XML-namespace / xmlns (<html xmlns="http://www.w3.org/1999/xhtml">) CSS-filen skal indeholde selektorer til. Er især relevant ved multiple namespaces - for eksampel, et XHTML document med SVG indlejret.

Skal placeres efter @charset og @import, men før alle øvrige @-regler.

Eksempler:
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

Indlejrede regler

@[KEYWORD] { /* indlejringer */ }

@font-face

@font-face

Tilknytning af downloaded Webfont til CSS-fil som 'font-family' xxx.

Til @fontface som selektor kan knyttes følgende deklarantioner (kun de to første er obligatoriske):

font-family: Det font-family navn fonten skal bruges under.
src: Sti til og navn på den fil, tegnsættet er downloaded til.
unicode-range: Ident for det 'unicode range' fonten indeholder tegn til. Default value is "U+0-10FFFF"
font-variant: Ident for den variant af fonten der skal kunne etableres selektorer for.
font-feature-settings: Ident for den font-feature, der skal understøttes.
font-stretch: Ident for / om fonten skal 'strækkes'.
font-weight: Ident for / om fontens tegn skal være tykkere end 'normal'.
font-style: Ident for den font-style, der skal understøttes.

@keyframes

@keyframes @keyframes mymove { from {top: 0px;} to {top: 200px;} }

UNDER UDVIKLING.

Anvendes til definition og styring af / motor for animationer. Styringen opbygges som en sekvens af selektorer (steps). Hver selektor / stoppunkt (ofte forløbsmæssigt styret som procent fra 0 - 100) definerer en ny 'tilstand' for animationen.

Via navn forbindes @keyframe-definitionen til selektoren for den <div>&-boks, der skal animeres.

@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}

@page

@page

Anvendes til at ændre margins, orphans, widows og page breaks i print.

Betingede (conditional)

@document

@document

Udsat til CSS4
Afgrænsning af indlejrede CSS-selektorer til kun at blive brugt sammen med specifikke sider.<

@media

@media @media screen and (max-width: 300px) { body { background-color: lightblue; } }

Browserne er hele tiden klar over, hvilken type medie de aktuelt arbejder med - og kan vælge CSS derefter. De differentierer mellem følgende typer media:

all: CSS-data til alle typer media eller omkring CSS-data der er fælles for alle typer media.
print: Omkring CSS-data specifikt til brug ved print.
screen: Omkring CSS-data specifikt til brug ved visning på skærm.
speech: Omkring CSS-data specifikt til brug ved speech.

I stedet for ovennævnte opdeling i samme fil kan der opdeles på denne måde:

Eksempler:

Print-data:

/* CONTAINER - Placering af side midt på skærmen*/
#container {
display: block;
height: auto;
margin: 0 auto ;
width: 1000px;
}

/*LINIE - Linie til dato etc.*/
#linie{ display: none;}

/*MENU - UDMMenu etc.*/
#menu{ display: none;}

/*FOOTER - evt. foddata*/
#footer{ display: none;}

.noprint { display: none;}

.w100 {width:100%;}

/* tooltip styling */
div.tooltip { display: none;}

mark {
font-family: "Comic Sans MS", cursive, sans-serif;
}

Skærmdata:

/* CONTAINER - Placering af side midt på skærmen*/
#container {
display: block;
height: auto;
margin: 0 auto ;
width: 1000px;
background-color: yellowGreen;
border: thin solid yellow;
}

.noshow { display: none;}

@supports

@supports

!!!!!!!

------------------------------------

@counter-style

@counter-style

@font-feature-values

@font-feature-values

!!!!!!!