Το border-shape έρχεται. Να γιατί τα CSS σχήματά σας δεν θα είναι ποτέ ξανά τα ίδια.

Πιθανόν να έχετε ακούσει για τη νέα συνάρτηση shape() (τώρα Baseline) και την ιδιότητα corner-shape. Αλλά υπάρχει ένα τρίτο εργαλείο που λύνει ήσυχα τον μεγαλύτερο πονοκέφαλο στα CSS σχήματα: το border-shape.

Πρώτα, μια γρήγορη υπενθύμιση: shape() και corner-shape

Η συνάρτηση shape() σας επιτρέπει να χρησιμοποιείτε σύνταξη τύπου SVG μέσα στο clip-path και το offset-path. Είναι πιο καθαρή από τη path(). Έγραψα μια σειρά τεσσάρων μερών γι' αυτήν, καθώς και ένα ξεχωριστό εις βάθος άρθρο για σύνθετα σχήματα. Και ναι — υπάρχει ένας μετατροπέας που μετατρέπει οποιοδήποτε σχήμα SVG σε έγκυρο CSS shape().

Το corner-shape λειτουργεί παράλληλα με το border-radius. Αντί απλώς να στρογγυλεύει τις γωνίες, σας επιτρέπει να επιλέξετε ανάμεσα σε round, scoop, bevel, notch ή squircle. Ωραίο, σωστά;

.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
}

Αλλά εδώ είναι η κρίσιμη διαφορά: το corner-shape συνεργάζεται καλά με τα border, box-shadow και άλλες διακοσμήσεις. Τα clip-path και mask τα αποκόπτουν. Γι' αυτό το corner-shape έχει σημασία — ακόμα κι αν η υποστήριξη είναι προς το παρόν μόνο σε Chromium.

Γνωρίστε το border-shape: Ο δημιουργός σχημάτων που διατηρεί τα περιγράμματα

Το corner-shape αγγίζει μόνο γωνίες. Τι γίνεται αν θέλετε να διαμορφώσετε ολόκληρο το στοιχείο; Αυτό ακριβώς κάνει το border-shape. Δέχεται τις ίδιες τιμές με το clip-path, συμπεριλαμβανομένου του shape().

Είναι λοιπόν απλώς ένα μετονομασμένο clip-path; Όχι. Το clip-path αποκόπτει τα πάντα — περιγράμματα, σκιές, περιγράμματα — εξαφανίζονται. Το border-shape διαμορφώνει το στοιχείο χωρίς να αποκόπτει διακοσμήσεις. Τα περιγράμματά σας ακολουθούν το σχήμα. Οι σκιές σας ακολουθούν το σχήμα. Χωρίς άλλα κόλπα.

.shape {
  /* Παλιός τρόπος */
  clip-path: shape() | polygon() | ...;

  /* Νέος τρόπος */
  border-shape: shape() | polygon() | ...;
}

Αν ήδη γνωρίζετε το clip-path, γνωρίζετε ήδη το border-shape. Απλώς αλλάξτε το όνομα της ιδιότητας. Αυτό είναι όλο.

Σχήματα μόνο με περίγραμμα: Χωρίς άλλες λύσεις ανάγκης

Θέλετε ένα σχήμα που να είναι μόνο το περίγραμμα; Γράψτε αυτό:

.shape {
  border: 8px solid red;
  border-shape: /* το σχήμα σας */;
}

Χωρίς επιπλέον markup. Χωρίς επικάλυψη SVG. Το περίγραμμα ακολουθεί τέλεια το σχήμα — ακόμα και σύνθετα. Έχω ήδη προσθέσει εκδόσεις μόνο με περίγραμμα στη συλλογή CSS σχημάτων μου και στους διαδικτυακούς μου γεννήτριες για blob, κυματιστές γραμμές και φανταχτερά πλαίσια.

Σχήματα με αποκοπή: Δύο σχήματα, μία ιδιότητα

Εδώ γίνεται έξυπνο. Το border-shape δέχεται δύο σχήματα. Η προδιαγραφή λέει:

Λειτουργία γραμμής (ένα σχήμα): Αποδίδει το περίγραμμα ως γραμμή κατά μήκος της διαδρομής του σχήματος.

Λειτουργία γεμίσματος (δύο σχήματα): Το περίγραμμα είναι η περιοχή μεταξύ των δύο διαδρομών. Η πρώτη ορίζει το εξωτερικό όριο, η δεύτερη το εσωτερικό όριο.

Έτσι, για να δημιουργήσετε μια αποκοπή:

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* ο κωδικός του σχήματός σας */;
}

Το inset(0) λειτουργεί ως το εξωτερικό ορθογώνιο. Το σχήμα σας γίνεται η εσωτερική αποκοπή. Θέλετε την αποκοπή μέσα σε έναν κύκλο; Αλλάξτε το inset(0) με circle().

Περιμένετε — δεν μπορώ απλά να χρησιμοποιήσω το border-radius: 50%; Όχι. Όταν το border-shape είναι ενεργό, το border-radius αγνοείται. Αλλά ειλικρινά, αυτό είναι εντάξει — μπορείτε να αναδημιουργήσετε οποιοδήποτε στρογγυλεμένο σχήμα απευθείας με το border-shape.

Τι σημαίνει αυτό για επιχειρήσεις στην Κύπρο / ΕΕ

Εάν ο ιστότοπός σας βασίζεται σε διαδραστικά στοιχεία — κουμπιά με προσαρμοσμένα σχήματα, κάρτες προϊόντων με διακοσμητικά περιγράμματα ή γραφήματα με αποκομμένα οπτικά — το border-shape θα εξοικονομήσει χρόνο ανάπτυξης και θα μειώσει την πολυπλοκότητα του CSS. Λιγότερος κώδικας σημαίνει ταχύτερες κατασκευές και χαμηλότερο κόστος συντήρησης. Για έργα με βάση την ΕΕ, να θυμάστε ότι οι αλλαγές CSS δεν επηρεάζουν τη συμμόρφωση με τον GDPR, αλλά οι απλούστεροι κώδικες είναι ευκολότεροι στον έλεγχο. Και δεδομένου ότι εξυπηρετούμε κοινό αγγλόφωνο, ρωσόφωνο και ελληνόφωνο, οι πολύγλωσσες διατάξεις επωφελούνται από δοχεία ανεξάρτητα σχήματος που προσαρμόζονται χωρίς να σπάνε.

Η υποστήριξη είναι ακόμα μόνο σε Chrome από τη στιγμή που γράφεται αυτό το άρθρο, οπότε μην το δημοσιεύσετε σε παραγωγή ακόμα. Αλλά αρχίστε να πειραματίζεστε. Όταν τα άλλα προγράμματα περιήγησης το υιοθετήσουν, θα γνωρίζετε ήδη πώς να το χρησιμοποιήσετε.

Δοκιμάστε τα demos στο Chrome. Παίξτε με τον μετατροπέα σχημάτων. Το επόμενο σύστημα σχεδιασμού σας θα σας ευχαριστήσει.