Native
Utility-klasser for å kontrollere tekstmarkering, berøring og dra-og-slipp-oppførsel i hybridapper der webinnhold vises i en native app sin WebView.
Klasser
| CSS-klasse | Beskrivelse |
|---|---|
.ix-native | Gjør at innholdet oppfører seg som native UI. Settes på <body> eller en wrapper. |
.ix-selectable | Lar brukeren markere og kopiere tekst. Overstyrer .ix-native. |
.ix-selectable-all | Ett klikk markerer alt innhold i elementet. Overstyrer .ix-native. |
CSS-egenskaper
Alle tre klassene virker på elementet de står på og alle barn under det.
.ix-native
| Egenskap | Verdi | Effekt |
|---|---|---|
user-select | none | Hindrer tekstmarkering |
-webkit-touch-callout | none | Deaktiverer iOS long-press kontekstmeny |
-webkit-user-drag | none | Hindrer dra-og-slipp av elementer (iOS Safari) |
touch-action | manipulation | Fjerner 300ms tap-delay og dobbelttap-zoom |
Input-felt, textarea og contenteditable-elementer får alltid user-select: text, slik at brukere kan redigere og markere tekst i skjemafelt som normalt.
.ix-selectable
| Egenskap | Verdi | Effekt |
|---|---|---|
user-select | text | Tillater vanlig tekstmarkering |
-webkit-touch-callout | default | Gjenoppretter long-press kontekstmeny |
.ix-selectable-all
| Egenskap | Verdi | Effekt |
|---|---|---|
user-select | all (fallback: text) | Ett klikk markerer alt innhold |
-webkit-touch-callout | default | Gjenoppretter long-press kontekstmeny |
user-select: all støttes i Chrome 53+, Safari 15+ og Firefox 121+. Eldre Firefox-versjoner får user-select: text som fallback.
Spesifisitet
Alle klassene bruker vanlige klasseselektorer (spesifisitet 0,1,0). .ix-selectable og .ix-selectable-all overstyrer .ix-native via kildeorden.
Klassene er kompatible med komponent-CSS-en i Indeks, som bruker :where() (spesifisitet 0,0,0). Utility-klassene vinner derfor alltid over komponent-CSS.
Eksempler
Grunnleggende bruk
Prøv å markere teksten i eksempelet under. Tekst innenfor .ix-native kan ikke markeres, mens tekst med .ix-selectable kan det.
Marker alt med ett klikk
.ix-selectable-all gjør at ett klikk markerer alt innhold i elementet. Praktisk for kontonummer, referanser og kodeblokker.
Skjemafelt fungerer alltid
Feltet under ligger inne i .ix-native, men oppfører seg som ellers.
Universell utforming
user-select: none tar fra brukeren muligheten til å kopiere. Noen er avhengige av det, for eksempel for å lime inn et kontonummer i en annen app eller sende en feilmelding videre. Sett .ix-selectable på innhold som skal kunne kopieres:
- Avtaletekst og vilkår
- Kontaktinformasjon (telefonnummer, e-post, adresse)
- Kontonummer, referansenummer og betalingsinformasjon
- Feilmeldinger brukeren kan trenge å dele med kundeservice