पब्लिश करने की तारीख: 11 अक्टूबर, 2024
Chrome 130 में, box-decoration-break सीएसएस प्रॉपर्टी उपलब्ध है. इसकी वैल्यू clone है. साथ ही, इसमें इनलाइन और ब्लॉक फ़्रैगमेंटेशन की सुविधा भी उपलब्ध है. इस पोस्ट में बताया गया है कि इसका इस्तेमाल क्यों और कैसे करना चाहिए.
इनलाइन फ़्रैगमेंटेशन
इनलाइन फ़्रैगमेंटेशन तब होता है, जब कोई इनलाइन एलिमेंट, जैसे कि टेक्स्ट की कोई स्ट्रिंग, एक से ज़्यादा लाइनों में टूट जाती है. इनलाइन एलिमेंट में एक बॉक्स होता है. आम तौर पर, आपको इसके बारे में सोचने की ज़रूरत नहीं होती. हालांकि, अगर आपको एलिमेंट में बैकग्राउंड या बॉर्डर जोड़ना है, तो आपको इसके बारे में सोचना होगा. यहां दिए गए उदाहरण में, स्पैन में border-radius वाला बैकग्राउंड जोड़ा गया है. बॉर्डर सिर्फ़ स्ट्रिंग की शुरुआत और आखिर में घुमावदार होता है.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
box-decoration-break की शुरुआती वैल्यू slice है. इससे बॉक्स पर यह स्लाइस किया गया इफ़ेक्ट दिखता है. हालांकि, box-decoration-break: clone के नए वर्शन का मतलब है कि हर लाइन, गोल बॉर्डर से शुरू और खत्म होती है.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
ब्लॉक फ़्रैगमेंटेशन
कॉन्टेंट को कई कॉलम में बांटने पर ब्लॉक फ़्रैगमेंटेशन होता है. ऐसा तब होता है, जब मल्टीपल-कॉलम लेआउट का इस्तेमाल करके कॉन्टेंट को कॉलम में बांटा जाता है. इसके अलावा, प्रिंट करने पर भी ऐसा होता है, जब कॉन्टेंट को पेजों में बांटा जाता है.
यहां दिए गए उदाहरण में, कॉन्टेंट को कॉलम में बांटा गया है. साथ ही, हर पैराग्राफ़ में बॉर्डर है. slice की शुरुआती वैल्यू के साथ, बॉक्स को कॉलम के सबसे नीचे और सबसे ऊपर से काटा जाता है.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
box-decoration-break: clone का इस्तेमाल करने पर, जब कोई बॉक्स फ़्रैगमेंट किया जाता है, तो हर फ़्रैगमेंट को बॉर्डर के साथ रैप किया जाता है.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
अगर आपने ऐसे बॉक्स पर बॉर्डर लगाए हैं जो पेज प्रिंट करते समय अलग-अलग हो जाते हैं, तो भी ऐसा ही होता है. अगर कोई बॉक्स दो पेजों में बंटा हुआ है, तो बॉक्स का बॉर्डर पहले पेज पर पूरा हो जाएगा. इसके बाद, दूसरे पेज पर एक नया बॉक्स खुलेगा.