Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

सीएसएस वाले इलाकों और बाहर रखे गए विषयों के साथ, वेब पर पत्रिका जैसा लेआउट

Christian Cantrell

परिचय

टेक्स्ट के लिए वेब एक बेहतरीन प्लैटफ़ॉर्म है. Adobe को इस क्षेत्र में काफ़ी अनुभव और विशेषज्ञता हासिल है. Adobe, वेब को आगे बढ़ाने के तरीके खोज रहा था. इसलिए, वेब पर टेक्स्ट की सुविधाओं को और बेहतर बनाना, हमारे लिए शुरुआत करने का एक ज़ाहिर तरीका था. वेब पर आम तौर पर, टेक्स्ट के लिए सिंगल कॉलम और वर्टिकल ओरिएंटेशन का इस्तेमाल किया जाता है. हालांकि, ग्राफ़िक के आस-पास टेक्स्ट को फ़्लो किया जा सकता है. साथ ही, सीएसएस की मदद से टेक्स्ट को कई कॉलम में फ़ॉर्मैट भी किया जा सकता है. इसके बावजूद, वेब पर मैगज़ीन जैसा लेआउट बनाना अब भी बहुत मुश्किल है. सीएसएस रीजन और सीएसएस एक्सक्लूज़न की मदद से, Adobe मॉडर्न ब्राउज़र पर डेस्कटॉप पब्लिशिंग की सुविधा लाने की कोशिश कर रहा है. उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में, सीएसएस एक्सक्लूज़न का इस्तेमाल करके टेक्स्ट को पहाड़ के आकार के हिसाब से दिखाया गया है:

सीएसएस एक्सक्लूज़न का उदाहरण — सीएसएस एक्सक्लूज़न के इस्तेमाल का उदाहरण

नीचे दिए गए स्क्रीनशॉट में मौजूद दस्तावेज़ में, सीएसएस एक्सक्लूज़न का भी इस्तेमाल किया गया है. इससे टेक्स्ट को इमेज में मौजूद आकृतियों के आस-पास रैप किया जा सकता है. साथ ही, टेक्स्ट को कॉलम में और पुल कोट के आस-पास फ़ॉर्मैट करने के लिए, सीएसएस रीजन का भी इस्तेमाल किया गया है:

सीएसएस रीजन

सीएसएस रीजन के बारे में ज़्यादा जानने से पहले, मैं आपको यह बताना चाहूंगा कि Google Chrome में रीजन को कैसे चालू किया जा सकता है. सीएसएस रीजन की सुविधा चालू करने के बाद, इस लेख में दिए गए कुछ सैंपल आज़माए जा सकते हैं. साथ ही, खुद के सैंपल भी बनाए जा सकते हैं.

Google Chrome में सीएसएस रीजन की सुविधा चालू करना

Chrome के वर्शन 20 (सटीक तौर पर वर्शन 20.0.1132.57) से, सीएसएस रीजन की सुविधा chrome://flags इंटरफ़ेस के ज़रिए चालू की जा सकती है. सीएसएस रीजन की सुविधा चालू करने के लिए, यह तरीका अपनाएं:

Chrome में नया टैब या विंडो खोलें.
जगह की जानकारी वाले बार में chrome://flags टाइप करें.
पेज में ढूंढें (control/command + f) का इस्तेमाल करें और "experimental Web Platform features" सेक्शन खोजें.
चालू करें लिंक पर क्लिक करें.
सबसे नीचे मौजूद, अभी फिर से लॉन्च करें बटन पर क्लिक करें.

Chrome के फ़्लैग के बारे में ज़्यादा जानने के लिए, Chrome फ़्लैग के बारे में पूरी जानकारी वाली मेरी ब्लॉग पोस्ट देखें.

ब्राउज़र को फिर से लॉन्च करने के बाद, सीएसएस रीजन को आज़माया जा सकता है.

सीएसएस रीजन के बारे में खास जानकारी

सीएसएस रीजन की मदद से, सिमैंटिक तरीके से मार्क-अप किए गए टेक्स्ट का ब्लॉक, "बॉक्स" (फ़िलहाल एलिमेंट) में अपने-आप फ़्लो हो जाता है. नीचे दिए गए डायग्राम में, टेक्स्ट (फ़्लो) और बॉक्स (वे क्षेत्र जिनमें टेक्स्ट फ़्लो होता है) को अलग-अलग दिखाया गया है:

कॉन्टेंट को तय किए गए क्षेत्रों में दिखाया जाता है — कॉन्टेंट, तय किए गए क्षेत्रों में फ़्लो होता है

आइए, सीएसएस रीज़न के इस्तेमाल का एक असल उदाहरण देखते हैं. मैं Adobe में डेवलपर होने के साथ-साथ, विज्ञान पर आधारित काल्पनिक कहानियां भी लिखता हूं. मैं अक्सर अपने काम को क्रिएटिव कॉमंस लाइसेंस के तहत ऑनलाइन पब्लिश करता हूं. साथ ही, इसे ज़्यादा से ज़्यादा डिवाइसों और ब्राउज़र पर काम करने की अनुमति देने के लिए, मैं अक्सर इस तरह के बेहद आसान फ़ॉर्मैट का इस्तेमाल करता हूं:

Unstyled Human Legacy Project Example — Unstyled Human Legacy Project का उदाहरण

सीएसएस रीजन का इस्तेमाल करके, मैंने एक ऐसा अनुभव तैयार किया जो विज़ुअल के तौर पर ज़्यादा दिलचस्प और ज़्यादा फ़ंक्शनल है. इसकी वजह यह है कि इसे नेविगेट करना आसान है और इसे पढ़ना ज़्यादा आरामदायक है:

Human Legacy Project में क्षेत्र दिखाया जा रहा है — रीजन के साथ ह्यूमन लेगसी प्रोजेक्ट.

मैंने इस प्रोटोटाइप में सीएसएस रीजन दिखाने की सुविधा जोड़ी है, ताकि आपको इसे बेहतर तरीके से समझाया जा सके. नीचे दिए गए स्क्रीनशॉट में दिखाया गया है कि क्षेत्रों को इस तरह से व्यवस्थित किया गया है कि वे कॉलम की तरह दिखें. ये कॉलम, ग्राफ़िक और बीच में मौजूद पुल-कोट के चारों ओर मौजूद हैं:

ह्यूमन लेगसी प्रोजेक्ट के तहत, अलग-अलग क्षेत्रों को दिखाने वाली इमेज — Human Legacy Project में दिखाए गए देश/इलाके

इस प्रोटोटाइप को यहां आज़माया जा सकता है. साथ ही, इसका सोर्स कोड भी देखा जा सकता है. नेविगेट करने के लिए, ऐरो बटन का इस्तेमाल करें. साथ ही, क्षेत्रों को देखने के लिए, Esc बटन दबाएं. पहले के प्रोटोटाइप यहां भी उपलब्ध हैं.

नाम वाला फ़्लो बनाना

टेक्स्ट के किसी ब्लॉक को अलग-अलग क्षेत्रों में फ़्लो करने के लिए, सीएसएस का इस्तेमाल करना बेहद आसान है. नीचे दिया गया स्निपेट, "content" आईडी वाले div को "article" नाम का फ़्लो असाइन करता है. साथ ही, "region" क्लास वाले किसी भी एलिमेंट को "article" नाम का वही फ़्लो असाइन करता है. इससे "कॉन्टेंट" एलिमेंट में मौजूद टेक्स्ट, "रीजन" क्लास वाले किसी भी एलिमेंट में अपने-आप फ़्लो हो जाएगा.

<!DOCTYPE html>
<html>
<head>
    <style>
    #content {
        { % mixin flow-into: article; % }
    }

    .region {
        { % mixin flow-from: article; % }
        box-sizing: border-box;
        position: absolute;
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    #box-a {
        border: 1px solid red;
        top: 10px;
        left: 10px;
    }

    #box-b {
        border: 1px solid green;
        top: 210px;
        left: 210px;
    }

    #box-c {
        border: 1px solid blue;
        top: 410px;
        left: 410px;
    }
    </style>
</head>
<body>
    <div id="box-a" class="region"></div>
    <div id="box-b" class="region"></div>
    <div id="box-c" class="region"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
    </div>
</body>
</html>

नतीजा कुछ ऐसा दिखता है:

ध्यान दें कि "कॉन्टेंट" div के अंदर मौजूद टेक्स्ट को अपने प्रज़ेंटेशन के बारे में कोई जानकारी नहीं होती. दूसरे शब्दों में, अलग-अलग इलाकों में इस्तेमाल किए जाने के बावजूद, इसका मतलब पूरी तरह से एक जैसा रह सकता है. इसके अलावा, रीजन सिर्फ़ एलिमेंट होते हैं. इसलिए, उन्हें किसी भी अन्य एलिमेंट की तरह सीएसएस का इस्तेमाल करके पोज़िशन और साइज़ दिया जाता है. इस वजह से, वे रिस्पॉन्सिव डिज़ाइन के सिद्धांतों के साथ पूरी तरह से काम करते हैं. एलिमेंट को नाम वाले फ़्लो के हिस्से के तौर पर तय करने का मतलब है कि तय किया गया टेक्स्ट, अपने-आप उनके ज़रिए फ़्लो होता है.

सीएसएस ऑब्जेक्ट मॉडल

ध्यान दें: इस सेक्शन में सिर्फ़ एक वेंडर प्रीफ़िक्स (webkit) का इस्तेमाल किया गया है, ताकि जानकारी को कम शब्दों में दिया जा सके. हालांकि, आपको ऐसा कोड लिखना चाहिए जो इस सुविधा के साथ काम करने वाले सभी ब्राउज़र पर काम करे!

सीएसएस ऑब्जेक्ट मॉडल या CSSOM, सीएसएस के साथ काम करने के लिए JavaScript एपीआई तय करता है. सीएसएस रीजन से जुड़े नए एपीआई की सूची यहां दी गई है:

document.webkitGetNamedFlows(): यह फ़ंक्शन, दस्तावेज़ में मौजूद नाम वाले फ़्लो का कलेक्शन दिखाता है.
document.webkitGetNamedFlows().namedItem("article"): यह फ़ंक्शन, किसी खास नाम वाले फ़्लो का रेफ़रंस दिखाता है. यह आर्ग्युमेंट, flow-into और from-from सीएसएस प्रॉपर्टी की वैल्यू के तौर पर तय किए गए नाम से मेल खाता है. ऊपर दिए गए कोड स्निपेट में बताए गए नाम वाले फ़्लो का रेफ़रंस पाने के लिए, आपको स्ट्रिंग "article" पास करनी होगी.
WebKitNamedFlow: यह किसी नाम वाले फ़्लो का ऑब्जेक्ट रिप्रज़ेंटेशन है. इसमें ये प्रॉपर्टी और फ़ंक्शन होते हैं:
- firstEmptyRegionIndex: यह एक पूर्णांक वैल्यू है, जो नाम वाले फ़्लो से जुड़े पहले खाली क्षेत्र के इंडेक्स पर ले जाती है. क्षेत्रों का कलेक्शन पाने का तरीका जानने के लिए, नीचे getRegions() देखें.
- name: फ़्लो के नाम वाली स्ट्रिंग वैल्यू.
- overset: यह एक बूलियन प्रॉपर्टी है, जो:
  - false जब नाम वाले फ़्लो का कॉन्टेंट, उससे जुड़े क्षेत्रों में फ़िट हो जाता है
  - true जब कॉन्टेंट फ़िट न हो और पूरे कॉन्टेंट को शामिल करने के लिए ज़्यादा रीजन की ज़रूरत हो.
- getContent(): यह फ़ंक्शन, नाम वाले फ़्लो में फ़्लो करने वाले नोड के रेफ़रंस के साथ एक कलेक्शन दिखाता है.
- getRegions(): यह एक ऐसा फ़ंक्शन है जो नाम वाले फ़्लो का कॉन्टेंट रखने वाले क्षेत्रों के रेफ़रंस के साथ कलेक्शन दिखाता है.
- getRegionsByContentNode(node): यह फ़ंक्शन, उस इलाके का रेफ़रंस दिखाता है जिसमें तय किया गया नोड मौजूद है. यह खास तौर पर, ऐसे सेक्शन ढूंढने के लिए मददगार है जिनमें नाम वाले ऐंकर जैसी चीज़ें शामिल हों.
webkitregionoversetchange इवेंट. यह इवेंट WebkitNamedFlow पर तब ट्रिगर होता है, जब उससे जुड़े कॉन्टेंट का लेआउट किसी भी वजह से बदलता है. जैसे, कॉन्टेंट जोड़ा या हटाया जाता है, फ़ॉन्ट का साइज़ बदलता है, क्षेत्र का आकार बदलता है वगैरह. साथ ही, इसकी वजह से किसी क्षेत्र की webkitRegionOverset प्रॉपर्टी बदलती है. यह इवेंट, लेआउट में होने वाले बड़े बदलावों को सुनने के लिए काम का है. यह इस बात का संकेत है कि कुछ ज़रूरी हुआ है और लेआउट पर ध्यान देने की ज़रूरत है. जैसे: ज़्यादा रीजन की ज़रूरत है, कुछ रीजन खाली हो सकते हैं वगैरह.
webkitregionfragmentchange इवेंट. इस बदलाव के समय लागू नहीं किया गया. यह इवेंट WebkitNamedFlow पर तब ट्रिगर होता है, जब उससे जुड़े कॉन्टेंट का लेआउट किसी भी वजह से बदलता है. यह webkitregionoversetchange की तरह ही होता है, लेकिन इसमें webkitRegionOverset प्रॉपर्टी में होने वाले किसी भी बदलाव पर ध्यान नहीं दिया जाता. यह इवेंट, लेआउट में होने वाले छोटे-छोटे बदलावों को सुनने के लिए काम का है. ज़रूरी नहीं है कि इन बदलावों का असर, नाम वाले फ़्लो के पूरे लेआउट पर पड़े. उदाहरण के लिए: कॉन्टेंट एक क्षेत्र से दूसरे क्षेत्र में चला जाता है, लेकिन पूरा कॉन्टेंट अब भी सभी क्षेत्रों में फ़िट होता है.
Element.webkitRegionOverset: जब एलिमेंट को flow-from सीएसएस प्रॉपर्टी असाइन की जाती है, तो वे रीजन बन जाते हैं. इन एलिमेंट में webkitRegionOverset प्रॉपर्टी होती है. अगर ये एलिमेंट किसी नेम किए गए फ़्लो का हिस्सा हैं, तो यह प्रॉपर्टी बताती है कि फ़्लो का कॉन्टेंट, क्षेत्र से बाहर जा रहा है या नहीं. webkitRegionOverset की वैल्यू ये हो सकती हैं:
- "overflow", अगर क्षेत्र में मौजूद कॉन्टेंट की संख्या, तय संख्या से ज़्यादा है
- "fit" अगर कॉन्टेंट, क्षेत्र के खत्म होने से पहले ही खत्म हो जाता है
- अगर कॉन्टेंट उस इलाके में उपलब्ध नहीं है, तो "empty"

CSSOM का एक मुख्य इस्तेमाल, webkitregionoversetchange इवेंट को सुनना और टेक्स्ट की अलग-अलग मात्रा को शामिल करने के लिए, डाइनैमिक तौर पर क्षेत्रों को जोड़ना या हटाना है. उदाहरण के लिए, अगर फ़ॉर्मैट किए जाने वाले टेक्स्ट की मात्रा का अनुमान नहीं लगाया जा सकता (शायद उपयोगकर्ता ने जनरेट किया हो), ब्राउज़र विंडो का साइज़ बदला गया हो या फ़ॉन्ट का साइज़ बदल गया हो, तो फ़्लो में हुए बदलाव को अडजस्ट करने के लिए, रीजन को जोड़ना या हटाना ज़रूरी हो सकता है. इसके अलावा, अगर आपको अपने कॉन्टेंट को पेजों में व्यवस्थित करना है, तो आपको डीओएम और अपने क्षेत्रों में डाइनैमिक तौर पर बदलाव करने के लिए एक सिस्टम की ज़रूरत होगी.

JavaScript कोड के इस स्निपेट में, ज़रूरत के हिसाब से डाइनैमिक तौर पर रीजन जोड़ने के लिए, सीएसएसओएम का इस्तेमाल करने का तरीका बताया गया है. ध्यान दें कि आसानी से समझने के लिए, यह कोड न तो क्षेत्रों को हटाने का काम करता है और न ही क्षेत्रों के साइज़ और पोज़िशन तय करता है. यह सिर्फ़ डेमो के लिए है.

var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);

function onLayoutUpdate(event) {
    var flow = event.target;
    
    // The content does not fit
    if (flow.overset === true) {
    addRegion();
    } else {
    regionLayoutComplete();
    }
}

function addRegion() {
    var region = document.createElement("div");
    region.style = "flow-from: article";
    document.body.appendChild(region);
}

function regionLayoutComplete() {
    // Finish up your layout.
}

सीएसएस रीजन के सैंपल पेज पर ज़्यादा डेमो उपलब्ध हैं.

सीएसएस पेज के टेंप्लेट

सीएसएसओएम का इस्तेमाल करना, पेजिंग और रिस्पॉन्सिव लेआउट जैसी चीज़ों को लागू करने का सबसे असरदार और आसान तरीका है. हालांकि, Adobe लंबे समय से टेक्स्ट और डेस्कटॉप पब्लिशिंग टूल के साथ काम कर रहा है. इसलिए, उसे पता है कि डिज़ाइनर और डेवलपर को पेजिंग की सामान्य सुविधाएं पाने के लिए, आसान तरीका भी चाहिए. इसलिए, हम सीएसएस पेज टेंप्लेट नाम के एक प्रस्ताव पर काम कर रहे हैं. इससे पेजिंग के व्यवहार को पूरी तरह से डिक्लेरेटिव तरीके से तय किया जा सकता है.

आइए, सीएसएस पेज टेंप्लेट के इस्तेमाल का एक सामान्य उदाहरण देखें. नीचे दिए गए कोड स्निपेट में, सीएसएस का इस्तेमाल करके दो नाम वाले फ़्लो बनाने का तरीका बताया गया है: "article-flow" और "timeline-flow." इसके अलावा, यह "combined-articles" नाम का तीसरा सिलेक्टर तय करता है. इसमें दोनों फ़्लो शामिल होंगे. "combined-articles" सिलेक्टर में overflow-style प्रॉपर्टी को शामिल करने का मतलब है कि कॉन्टेंट को x ऐक्सिस या हॉरिज़ॉन्टल तौर पर अपने-आप पेज किया जाना चाहिए:

<style>
    #article {
    { % mixin flow-into: article-flow; % }
    }

    #timeline {
    { % mixin flow-into: timeline-flow; % }
    }

    #combined-articles {
    overflow-style: paged-x;
    }
</style>

अब फ़्लो तय हो गए हैं और ओवरफ़्लो के लिए मनचाहा व्यवहार तय कर दिया गया है. इसलिए, अब पेज टेंप्लेट बनाया जा सकता है:

@template {
    @slot left {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }

    @slot time {
    width: 25%;
    float: left;
    { % mixin flow-from: timeline-flow; % }
    }

    @slot right {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }
}

पेज टेंप्लेट को नए "at" सिंटैक्स का इस्तेमाल करके तय किया जाता है. ऊपर दिए गए कोड स्निपेट में, हमने तीन स्लॉट तय किए हैं. हर स्लॉट, एक कॉलम से जुड़ा है. "article-flow" का टेक्स्ट, बाईं और दाईं ओर मौजूद कॉलम में दिखेगा. वहीं, "timeline-flow" का टेक्स्ट, बीच वाले कॉलम में दिखेगा. नतीजा कुछ ऐसा दिख सकता है:

पेज टेंप्लेट का उदाहरण — पेज के टेंप्लेट का उदाहरण

ध्यान दें कि लेख का टेक्स्ट -- बाएं और दाएं कॉलम में मौजूद टेक्स्ट -- अंग्रेज़ी में है और बीच में मौजूद टाइमलाइन जर्मन में है. इसके अलावा, दस्तावेज़ को हॉरिज़ॉन्टल तौर पर पेज किया जाता है. इसके लिए, किसी JavaScript कोड की ज़रूरत नहीं होती. सब कुछ सीएसएस में पूरी तरह से डिक्लेरेटिव तरीके से किया गया था.

सीएसएस पेज टेंप्लेट अब भी एक प्रस्ताव है.हालांकि, हमारे पास एक प्रोटोटाइप है, जो JavaScript "शिम" (इसे पॉलीफ़िल भी कहा जाता है) का इस्तेमाल करता है.इससे आपको उनके साथ एक्सपेरिमेंट करने की सुविधा मिलती है.

सीएसएस रीजन के बारे में ज़्यादा जानने के लिए, html.adobe.com पर सीएसएस रीजन पेज देखें.

सीएसएस एक्सक्लूज़न

मैगज़ीन जैसा लेआउट बनाने के लिए, सिर्फ़ टेक्स्ट को अलग-अलग हिस्सों में बांटना काफ़ी नहीं है. अच्छी क्वालिटी और विज़ुअल तौर पर दिलचस्प डेस्कटॉप पब्लिशिंग का एक अहम एलिमेंट, टेक्स्ट को अनियमित ग्राफ़िक और शेप के आस-पास या अंदर फ़्लो करने की सुविधा है. सीएसएस एक्सक्लूज़न, वेब पर इस लेवल की प्रोडक्शन क्वालिटी उपलब्ध कराता है.

यहां दिया गया स्क्रीनशॉट, सीएसएस एक्सक्लूज़न प्रोटोटाइप का है. इसमें टेक्स्ट को डाइनैमिक तौर पर, एक ऐसे पाथ के आस-पास दिखाया गया है जो चट्टान के आकार से मैच करता है:

अगले स्क्रीनशॉट में, इसके उलट दिखाया गया है: अनियमित आकार वाले पॉलीगॉन के अंदर टेक्स्ट फ़्लो:

अनियमित आकार के बहुभुज में टेक्स्ट फ़्लो करना — अनियमित आकार वाले पॉलीगॉन में टेक्स्ट फ़्लो करना

किसी भी आकार के आस-पास या उसके अंदर टेक्स्ट को फ़्लो करने के लिए, सबसे पहले ज़रूरी एल्गोरिदम को डेवलप और ऑप्टिमाइज़ करना होगा. फ़िलहाल, Adobe ऐसे इंप्लिमेंटेशन पर काम कर रहा है जो सीधे WebKit में योगदान देंगे. इन एल्गोरिदम को ऑप्टिमाइज़ करने के बाद, ये सीएसएस एक्सक्लूज़न के बाकी हिस्सों के लिए बुनियादी ढांचा बन जाएंगे.

सीएसएस एक्सक्लूज़न के बारे में ज़्यादा जानकारी के लिए, html.adobe.com पर सीएसएस एक्सक्लूज़न पेज देखें. सीएसएस एक्सक्लूज़न के लिए इस्तेमाल की जाने वाली टेक्नोलॉजी पर Adobe के काम के बारे में ज़्यादा जानने के लिए, हंस मुलर की ब्लॉग पोस्ट हॉरिज़ॉन्टल बॉक्स: पॉलीगॉन इंटरसेक्शन फ़ॉर सीएसएस एक्सक्लूज़न देखें.

सीएसएस रीजन और सीएसएस एक्सक्लूज़न की स्थिति (2012)

मैंने पहली बार सीएसएस रीज़न और सीएसएस एक्सक्लूज़न के बारे में सार्वजनिक तौर पर, Google I/O 2011 में Adobe Developer Pod में बात की थी. उस समय, मैं अपने कस्टम प्रोटोटाइप ब्राउज़र में डेमो दिखा रहा था. लोगों ने इस सुविधा को काफ़ी पसंद किया. हालांकि, जब उन्हें पता चला कि मैंने जो सुविधाएं दिखाई हैं वे अभी तक किसी भी मुख्य ब्राउज़र में उपलब्ध नहीं हैं, तो उन्हें काफ़ी निराशा हुई.

मैं इस साल (2012) फिर से Google I/O में शामिल हुआ. इस बार मैं अपने सहकर्मी विंसेंट हार्डी और Google के एलेक्स डैनिलो के साथ प्रज़ेंटर के तौर पर शामिल हुआ. प्रज़ेंटेशन यहां देखा जा सकता है. सिर्फ़ एक साल बाद, CSS Regions की करीब 80% खास जानकारी को WebKit में लागू कर दिया गया है. साथ ही, यह Google Chrome के सबसे नए वर्शन में पहले से मौजूद है. ध्यान दें कि CSS Regions को फ़िलहाल chrome://flags की मदद से चालू करना होगा. Android के लिए Chrome में, CSS Regions के लिए शुरुआती सहायता भी उपलब्ध कराई गई है:

Android के लिए Chrome पर रीजन — Android के लिए Chrome पर मौजूद रीजन

इसके अलावा, सीएसएस रीजन और सीएसएस एक्सक्लूज़न, दोनों को Internet Explorer 10 की झलक में लागू किया गया है. फ़िलहाल, ये Firefox के लिए Mozilla के 2012 के रोडमैप में शामिल हैं. Safari के अगले मेजर वर्शन में, सीएसएस रीजन की ज़्यादातर खास बातें शामिल होनी चाहिए. साथ ही, इसके बाद के अपडेट में बाकी की खास बातें शामिल होनी चाहिए.

अप्रैल 2011 में W3C को हमारा पहला प्रस्ताव मिलने के बाद से, हमने सीएसएस रीजन और सीएसएस एक्सक्लूज़न के साथ जो प्रोग्रेस की है उसकी पूरी टाइमलाइन यहां दी गई है:

क्षेत्र और एक्सक्लूज़न की प्रोग्रेस — क्षेत्र और बाहर रखने की प्रोसेस

नतीजा

Adobe के पास टेक्स्ट, फ़ॉन्ट, और डेस्कटॉप पब्लिशिंग का काफ़ी अनुभव है. इसके लिए, वह InDesign जैसे टूल का इस्तेमाल करता है. हालांकि, वेब पहले से ही टेक्स्ट के लिए एक बहुत ही बेहतरीन प्लैटफ़ॉर्म है, लेकिन हम अपने ज्ञान और अनुभव का इस्तेमाल करके, टेक्स्ट प्रज़ेंटेशन को और बेहतर बनाना चाहते हैं. सीएसएस रीजन और सीएसएस एक्सक्लूज़न की मदद से, कॉन्टेंट को सिमैंटिक तरीके से स्ट्रक्चर किया जा सकता है. साथ ही, इससे मैगज़ीन जैसा लेआउट भी बनाया जा सकता है. इससे वेब पर कॉन्टेंट को ज़्यादा बेहतर तरीके से दिखाया जा सकता है.