kaxigt.com

Jag skriver om webben för webben

CSS4: nya spännande selektorer och funktioner

Postad: 7 augusti 2017 | CSS | No Comments
Lästid: 2 minuter

När, eller mer om, CSS4 kommer så är det en del nya selektorer som vi får bekanta oss med. Vissa används delvis som CSS3. Med CSS4 får de fler och logiska funktioner. Vissa menar att CSS4 bara är CSS 3.2. Vad tycker du?

CSS4-selektorer

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall.

Källa: Hela härligheten är hämtad hos http://css4-selectors.com/selectors/

Grundläggande om pseudo-class och pseudo-element kan du bekanta dig med i 10 grundläggande lektioner i CSS.

Gör också gärna ett besök hos CSS4 Rocks och lär dig lite mer. Du kan faktiskt redan nu testa hur mycket din webbläsare klarar av att rendera CSS4.


Smashing Magazine har också lagt upp några exempel om hur logiken med CSS4 underlättar för oss, jag har lånat en del för att visa hur smart det kan bli. Tack för det! Låt oss kika på en vanlig menu med pseudo-classer:

ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
   color: red;
}

Tänk om vi kunde göra så här istället:

ul.menu li a:matches(:link, :hover, :visited, :focus) {
   color: red;
}

Men det stannar inte här, utan med pseudo-classen :matches kan vi förenkla det ännu mer:

article:matches(.active, .visible, #important) {
   background: red;
}

En redan förekommande pseudo-class i CSS3 är den negativa :not. Här har man gått ytterligare ett steg:

p:not(.active, .visible) {
   color: red;
}

Vi får fler psudo-classer vad gäller våra länkar och hur vi kan styla dem. Först har vi :any-link, en pseudo-class som sammanfogar a:link och a:visited.

a:link,
a:visited {
   color: red;
}

any:link stylar dem båda och oavsett om de är besökta eller ej så kan vi ge dem samma länkfärg via detta:

a:any-link {
   color: red;
}

Den andra pseudo-classen är :local-link, och nu händer det saker för du kan ge dina länkar olika styling, exempel din förstasida har en färg på länkarna, utan att dina andra länkar berörs.

nav :local-link {
   text-decoration: none;
}

Tack vare detta behöver vi inte längre använda text-decoration. Låt oss kika på ännu ett exempel som stylar alla utgående länkar:

:not(:local-link(0)) {
   color: red;
}

Som sista exempel ska vi se hur bra :local-link kan användas med en parameter om man använder breadcrumbs eller en menu:

nav :local-link(0) {
   color: red;
}
nav :local-link(1) {
   color: green;
}
nav :local-link(2) {
   color: blue;
}
nav :local-link(3) {
   color: yellow;
}
nav :local-link(4) {
   color: gray;
}

Ponera att den nuvarande addressen är https://kaxigt.com/2017/08/12/some-title/, och du har dessa länkar i din breadcrumb:

1. Home
    https://kaxigt.com/
 2. 2017
    https://kaxigt.com/2017/
 3.  Augusti 2017
    https://kaxigt.com/2012/10/
 4. 12 Augusti 2017
    https://kaxigt.com/2017/08/12/
 5. Article
    https://kaxigt.com/2017/08/12/some-title/

Den första länken blir röd, den andra grön, den tredje blå, sen gul, och grå.


Information är också hämtad hos CSS4 – W3C Working Draft from .