पब्लिश करने की तारीख: 11 अक्टूबर, 2024
Chrome 130 में, clone की वैल्यू वाली box-decoration-break सीएसएस प्रॉपर्टी उपलब्ध है. इसमें इनलाइन और ब्लॉक फ़्रैगमेंटेशन की सुविधा भी है. इस पोस्ट में बताया गया है कि ऐसा क्यों और कैसे
इसका इस्तेमाल करें.
इनलाइन फ़्रैगमेंटेशन
इनलाइन फ़्रैगमेंटेशन तब होता है, जब कोई इनलाइन एलिमेंट होता है. उदाहरण के लिए,
टेक्स्ट की स्ट्रिंग, जो कई पंक्तियों में बंटी होती है. इनलाइन एलिमेंट में एक बॉक्स है,
जिसके बारे में आपको आम तौर पर सोचने की ज़रूरत नहीं है, जब तक कि आप
बैकग्राउंड या बॉर्डर का इस्तेमाल करें. नीचे दिए गए उदाहरण में, स्पैन में 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;
}
पेज को प्रिंट करते समय, बॉक्स के किनारों पर बॉर्डर होने पर भी यही समस्या होती है. अगर कोई बॉक्स दो पेजों में बंटा है, तो बॉक्स का बॉर्डर पहले पेज पर पूरा हो जाएगा. इसके बाद, दूसरे पेज पर एक नया बॉक्स खुल जाएगा.