La border-boundarypropriété en CSS définit des contraintes aux limites d'un élément qui affectent le comportement des bordures de l'élément. Il est défini dans la spécification CSS Round Display Level 1, qui est actuellement en état de brouillon de travail. Cela signifie que les choses peuvent changer entre maintenant et la recommandation officielle des candidats.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Le fait que cette propriété se trouve dans la spécification CSS Round Display vous indique déjà à quoi elle sert: créer des interfaces circulaires. Plus précisément, border-boundaryrelève de la section «Dessiner des bordures autour de la bordure d'affichage» qui est encore un autre indice de ce qu'il fait bien: permettre aux bordures d'un élément de respecter la limite ronde des interfaces circulaires.
Imaginez, si vous voulez, une montre intelligente avec un écran rond. Disons que l'écran mesure 150 pixels au carré. Et à l'intérieur se trouve une boîte orange qui a les mêmes dimensions.
Rien de fou, non? La boîte orange est conforme à l'affichage arrondi car elle déborde des bords, qui sont cachés. Mais regardez ce qui se passe lorsqu'une bordure est ajoutée à la boîte…
Hmm, pas si génial. Encore une fois, les bords de la boîte débordent de l'affichage rond, de sorte que notre bordure est coupée dans le processus.
C'est là que border-boundarys'inscrit l'image. L'ajouter à la boîte avec une valeur de displaypermet à la bordure de la boîte de suivre la forme ronde de l'affichage. Étant donné que le support du navigateur de la propriété est exactement zilch pour le moment, permettez-moi de vous proposer une maquette visuelle du résultat attendu.
Vous pouvez imaginer à quel point cela pourrait être utile pour la conception de montres avec interfaces. Le groupe de travail CSS a compilé une liste de cas d'utilisation possibles où cela border-boundarypourrait vraiment être utile.
Syntaxe
border-boundary: none | parent | display;- Valeur initiale:
none - S'applique à: tous les éléments
- Héritée: oui
- Pourcentages: n / a
- Valeur calculée: comme spécifié
- Type d'animation: discret
Valeurs
none: aucune limite n'est définie sur la frontière.parent: définit la limite où la zone de l'élément et les bords de bordure de son parent se rencontrent.display: définit la limite où la zone de l'élément et les bords de la bordure de la fenêtre se rencontrent.
Prise en charge du navigateur
Aucun au moment de la rédaction de cet article.
Lectures complémentaires
- Spécification CSS Round Display Level 1 (Working Draft)
- Exemples d'affichage rond (Wiki du groupe de travail CSS)
- Spécifications de l'affichage rond CSS (01.org)