Grunnleggende
CSS import
npx @navikt/aksel css-imports
Bruk kommandolinje-verktøyet vårt til å håndtere CSS import i løsningen din. Da blir cascading + mye mer håndtert for deg!
Aksel tilbyr nå mer fleksibilitet når du skal importere komponent-styling til løsningen din. For de fleste vil det enkle ofte være det beste og all stylingen du trenger for å bruke Aksel kan hentes slik.
JSX/TSXimport "@navikt/ds-css";
CSS@import "@navikt/ds-css";
Spesifisitet
Hvis man overskriver en del styling fra Aksel, ender man ofte opp med problemer med spesifisitet. Den nye CSS-løsningen layers løser dette. All styling importert fra Aksel vil her få lavest spesifisitet.
@import "@navikt/ds-css" layer(aksel);
layers er ikke støttet i safari 15.3 eller eldre. Dette vil kunne påvirke brukere av IOS-enheter eldre enn ~2016.
Minified og prefikset
CSS fra @navikt/ds-css
er ikke minified eller prefikset rett ut av boksen, men fra v2.9.0 vil all CSS ha en ekstra *.min.css
-versjon som håndterer dette.
@import "@navikt/ds-css/dist/index.min.css";
De fleste moderne bundlere og frameworks håndterer dette automatisk. Dette vil defor være mest nyttig hvis man laster CSS fra CDN eller andre løsninger som ikke kjører post-processing med f.eks. postcss
, eks inlinet CSS.
Globale stiler
Man kan velge å manuelt trekke inn bare deler av det globale stilsettet. Hvis man fortsatt ønsker all komponent relatert styling finner man den i components.css
.
Globale stiler@import "@navikt/ds-css/dist/global/fonts.css"; @import "@navikt/ds-css/dist/global/tokens.css"; @import "@navikt/ds-css/dist/global/reset.css"; @import "@navikt/ds-css/dist/global/baseline.css"; (required)@import "@navikt/ds-css/dist/global/print.css";
Alle komponenter@import "@navikt/ds-css/dist/components.css";
fonts.css
og tokens.css
kan bare fjernes hvis man manuelt overstyrer dette i egen løsning. Uten disse vil alle komponenter brekke!
De fleste vil nok også trenge å ha med print/reset, men finnes andre alternativ enn Aksel for det.
Opt-in komponentstyling
Det er ikke alltid man ønsker eller trenger å trekke inn all stylingen fra Aksel når man bruker komponentene. Dette vil være nyttig for web-components, løsninger som dekoratøren der hver eneste kB spart er viktig eller man bare ønsker å minske CSS-bundle med noen kB.
// Globale stiler@import "@navikt/ds-css/dist/global/fonts.css";@import "@navikt/ds-css/dist/global/tokens.css";@import "@navikt/ds-css/dist/global/reset.css";@import "@navikt/ds-css/dist/global/baseline.css";@import "@navikt/ds-css/dist/global/print.css";
// Komponent stiler@import "@navikt/ds-css/dist/component/typography.css";@import "@navikt/ds-css/dist/component/accordion.css";@import "@navikt/ds-css/dist/component/alert.css";@import "@navikt/ds-css/dist/component/button.css";@import "@navikt/ds-css/dist/component/loader.css";
CSS Cascading er viktig her, slik at typography.css
alltid må være først i komponent-listen. Kommandolinje-verktøyet vårt håndterer dette for deg!
CDN
All styling finnes versjonert på NAV-CDN.
Hele stilsettet<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/index.min.css" as="style"></link>----
Globale stiler<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/global/baseline.min.css" as="style"></link>....
Komponent stiler<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/component/typography.min.css" as="style"></link><link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/component/accordion.min.css" as="style"></link>....
Hvis man velger å bruke CDN for lasting av CSS, burde man låse @navikt/ds-react
(+ alle andre Aksel-løsninger) til samme versjon. CDN støtter ikke semver, så man må manuelt oppdatere versjoner og holde dem i synk.
Hva med @navikt/ds-css-internal?
Fra versjon 4.0.0 er all styling fra denne pakken flyttet inn i @navikt/ds-css. Den vil da også være tilgjengelig på CDN sammen med all annen styling.