Naslaghandleiding voor CSS-sjablonen

Het configureren van uw huisstijl voor het aanmeldingsproces voor gebruikers biedt een naadloze ervaring in uw toepassingen die Gebruikmaken van Microsoft Entra ID als de service voor identiteits- en toegangsbeheer. Gebruik deze CSS-referentiehandleiding als u de CSS-sjabloon gebruikt als onderdeel van het de huisstijl van het bedrijf aan te passen proces.

Belangrijk

Tenants die na 5 januari 2026 zijn gemaakt, hebben geen aangepaste CSS beschikbaar voor huisstijl in Microsoft Entra ID. Na 21 juli 2026 kunnen tenants die vóór 6 januari 2026 zijn gemaakt, geen aangepaste CSS configureren.

Microsoft Entra Externe id tenants worden niet beïnvloed.

Afschaffing van aangepaste CSS-indeling en plaatsingseigenschappen

Om in overeenstemming te zijn met het Microsoft Secure Future Initiative en de focus op identiteitsbeveiliging en phishingweerstand, Microsoft Entra ID de ondersteuning voor aangepaste CSS-indeling en plaatsingseigenschappen in huisstijl van het bedrijf buiten gebruik stelt. Met deze eigenschappen bepaalt u waar elementen worden weergegeven op de aanmeldingspagina en hoe deze gelaagd, aangepast en weergegeven worden. Ze kunnen bijvoorbeeld pagina-inhoud verplaatsen, overlappen, het formaat ervan wijzigen of verbergen. Als u ze buiten gebruik laat, blijven de indelingen van aanmeldingspagina's consistent en voorspelbaar in Microsoft Entra ID.

Deze wijziging is de eerste stap voor het buiten gebruik stellen van de aangepaste CSS-functie. Microsoft plannen om vooraf kennisgeving, aanbevolen migratiepaden en toekomstige geavanceerde aanpassingsopties te bieden vóór die buitengebruikstelling.

Zie het blogbericht Microsoft Entra ID de beveiliging van merk-aanmeldingen verbetert voor meer informatie.

Timeline

  • Na 21 juli 2026: Tenants die zijn gemaakt vóór 6 januari 2026, die nog geen aangepaste CSS gebruiken, kunnen geen aangepaste CSS configureren.
  • Later: De betreffende indelings- en plaatsingseigenschappen worden wereldwijd afgeschaft. Na afschaffing worden deze eigenschappen geblokkeerd en werken ze niet meer.
  • Uiteindelijk: Aangepaste CSS wordt volledig buiten gebruik gesteld. Microsoft deelt meer richtlijnen, waaronder aanbevolen migratiepaden, vóór de buitengebruikstelling.

Wie wordt getroffen?

Deze wijziging is van invloed op organisaties waarvan de Microsoft Entra ID tenant gebruikmaakt van een van de afgeschafte indelings- en plaatsingseigenschappen in hun aangepaste CSS. Microsoft Entra Externe id tenants worden niet beïnvloed. Na 21 juli 2026 kunnen tenants die vóór 6 januari 2026 zijn gemaakt, geen aangepaste CSS configureren.

Microsoft de betrokken klanten vooraf op de hoogte stelt.

Afgeschafte eigenschappen

Als uw aangepaste CSS een van de volgende eigenschappen gebruikt, verwijdert u deze uit uw configuratie. Deze eigenschappen hebben geen ondersteunde migratie of vervanging.

  • position(inclusief top, right, bottom, , , en leftz-index)
  • margin(inclusief margin-top, margin-bottom, en margin-leftmargin-right)
  • transform
  • opacity
  • overflow
  • filter
  • pointer-events
  • clip-path
  • mix-blend-mode
  • translate
  • -webkit-transform
  • -moz-transform
  • -ms-transform
  • -o-transform
  • scale
  • rotate
  • perspective
  • display
  • visibility
  • inset
  • zoom
  • offset
  • offset-path
  • offset-distance
  • margin-block
  • margin-block-start
  • margin-block-end
  • margin-inline
  • margin-inline-start
  • margin-inline-end
  • order
  • grid-area
  • grid-column
  • grid-column-start
  • grid-column-end
  • grid-row
  • grid-row-start
  • grid-row-end
  • isolation
  • overflow-x
  • overflow-y
  • overflow-block
  • overflow-inline
  • content-visibility
  • clip
  • mask
  • mask-image
  • -webkit-mask
  • -webkit-mask-image

Uw aangepaste CSS controleren en bijwerken

Als u uw huidige CSS-bestand wilt controleren, selecteert u Bewerken op de pagina Aangepaste huisstijl in het Microsoft Entra-beheercentrum.https://entra.microsoft.com Selecteer Downloaden op het tabblad Indeling onder Aangepaste CSS. Bekijk het gedownloade bestand voor de eigenschappen die worden vermeld in afgeschafte eigenschappen.

Als u alle lokalisaties van de huisstijl van uw bedrijf wilt controleren, gebruikt u Microsoft Graph om de huidige huisstijlconfiguratie van uw bedrijf te exporteren en controleert u deze vervolgens met het hulpprogramma tenantbrandmerkcontrole. U hebt een account van globale beheerder of huisstijlbeheerder nodig.

  1. Ga naar Microsoft Graph Explorer en meld u aan bij uw tenant.

  2. Als u uw tenant-id nog niet weet, stuurt u een GET aanvraag naar de volgende URL en kopieert u de id waarde uit het antwoord:

    https://graph.microsoft.com/v1.0/organization

  3. Verzend een GET aanvraag naar de volgende URL om alle geconfigureerde lokalisaties van de huisstijl van het bedrijf te retourneren. Vervang door <tenant-id> uw tenant-id:

    https://graph.microsoft.com/v1.0/organization/<tenant-id>/branding/localizations

  4. Kopieer het antwoord of exporteer het naar een JSON-bestand.

  5. Ga naar het hulpprogramma tenantbrandmerkcontrole.

  6. Plak het gekopieerde antwoord of upload het geëxporteerde JSON-bestand in het hulpprogramma. Het hulpprogramma bevat elke landinstelling en de afgeschafte eigenschappen die worden gebruikt.

Als u de afgeschafte eigenschappen wilt verwijderen, bewerkt u het gedownloade CSS-bestand, uploadt u het naar de pagina Huisstijl van het bedrijf in de Microsoft Entra-beheercentrum en slaat u de wijzigingen op. Als u de impact van de visual wilt valideren voordat u de productie bijwerkt, past u eerst de wijzigingen in een testtenant toe.

HTML-selectors

De volgende CSS-stijlen worden de standaardtekst en koppelingsstijlen voor de hele pagina. Stijlen die u toepast op andere koppelingen of tekst, overschrijven deze selectors.

  • body - Stijlen voor de hele pagina
  • Stijlen voor koppelingen:
    • a, a:link - Alle koppelingen
    • a:hover - Wanneer de muis over de koppeling is
    • a:focus - Wanneer de koppeling de focus heeft
    • a:focus:hover - Wanneer de koppeling de focus heeft en de muis over de koppeling
    • a:active - Wanneer op de koppeling wordt geklikt

Microsoft Entra CSS-selectors

Gebruik de volgende CSS-selectors om de details van de aanmeldingservaring te configureren.

Opmerking

Als u interne navigatiekoppelingen wilt aanpassen, gebruikt u de nieuwe aangepaste CSS-selector: .ext-link.

  • .ext-background-image - Container met de achtergrondafbeelding in de standaard lightbox-sjabloon

  • .ext-header - Koptekst boven aan de container

  • .ext-header-logo - Koptekstlogo boven aan de container

    Schermopname van het aanmeldingsscherm met de gebieden .ext-header en .ext-header-logo gemarkeerd.

  • .ext-middle - Stijl voor de achtergrond op volledig scherm waarmee het aanmeldingsvak verticaal wordt uitgelijnd op het midden en horizontaal naar het midden

  • .ext-vertical-split-main-section - Stijl voor de container van de achtergrond van het gedeeltelijke scherm in de verticale gesplitste sjabloon die zowel een aanmeldingsvak als een achtergrond bevat (deze stijl wordt ook wel de ADFS-sjabloon (Active Directory Federation Services) genoemd.)

  • .ext-vertical-split-background-image-container - Achtergrond van aanmeldingsvak in de verticale splitsing/ADFS-sjabloon

  • .ext-sign-in-box - Aanmeldingsvakcontainer

  • .ext-title - Titeltekst

    Schermopname van het aanmeldingsvak, met het gedeelte van het vak dat is gestijld met de .ext-sign-in-box selector.

  • .ext-subtitle - Ondertiteltekst

  • Stijlen voor koppelingen:

    • .ext-link - Interne navigatiekoppelingen

  • Stijlen voor primaire knoppen:

    • .ext-button.ext-primary - Standaardstijl van primaire knop
    • .ext-button.ext-primary:hover - Wanneer de muis over de knop is
    • .ext-button.ext-primary:focus - Wanneer de knop de focus heeft
    • .ext-button.ext-primary:focus:hover - Wanneer de focus op de knop en de muis over de knop is
    • .ext-button.ext-primary:active - Wanneer op de knop wordt geklikt

    Schermopname van het aanmeldingsvak met de knop Volgende gemarkeerd.

  • Stijlen voor secundaire knoppen:

    • .ext-button.ext-secondary - Secundaire knoppen
    • .ext-button.ext-secondary:hover - Wanneer de muis over de knop is
    • .ext-button.ext-secondary:focus - Wanneer de knop de focus heeft
    • .ext-button.ext-secondary:focus:hover - Wanneer de focus op de knop en de muis over de knop is
    • .ext-button.ext-secondary:active - Wanneer op de knop wordt geklikt

    Schermopname van het aanmeldingsvak in de stap Aanmeldingsopties, met de secundaire knop Terug gemarkeerd.

  • .ext-error - Fouttekst

    Schermopname van het aanmeldingsvak met fouttekst gemarkeerd.

  • Stijlen voor tekstvakken:

    • .ext-input.ext-text-box - Tekstvakken
    • .ext-input.ext-text-box.ext-has-error: wanneer er een validatiefout is gekoppeld aan het tekstvak
    • .ext-input.ext-text-box:hover - Wanneer de muis over het tekstvak loopt
    • .ext-input.ext-text-box:focus - Wanneer het tekstvak de focus heeft
    • .ext-input.ext-text-box:focus:hover - Wanneer het tekstvak de focus heeft en de muis over het tekstvak beweegt

    Schermopname van het aanmeldingsvak met het tekstvak met voorbeeldtekst gemarkeerd.

  • .ext-boilerplate-text - Aangepaste berichttekst onder aan het aanmeldingsvak

  • .ext-promoted-fed-cred-box - tekstvak Aanmeldingsopties

    Schermopname van het aanmeldingsvak met het optionele standaardtekstgebied gemarkeerd.

  • Stijlen voor de voettekst:

    • .ext-footer - Voettekstgebied onder aan de pagina
    • .ext-footer-links - Links in de voettekst onder aan de pagina
    • .ext-footer-item - Items koppelen (zoals "Gebruiksvoorwaarden" of "Privacy & cookies") in de voettekst onder aan de pagina
    • .ext-debug-item - Beletselteken voor foutopsporing in de voettekst onder aan de pagina
  • Last updated on