इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Christian Cantrell

परिचय

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

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

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

सीएसएस क्षेत्र

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

Google Chrome में सीएसएस क्षेत्रों की सुविधा चालू करना

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

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

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

ब्राउज़र को फिर से लॉन्च करने के बाद, सीएसएस क्षेत्रों के साथ प्रयोग शुरू किया जा सकता है.

सीएसएस क्षेत्रों की खास जानकारी

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

कॉन्टेंट, तय किए गए इलाकों में फ़्लो करता है

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

बिना स्टाइल वाले मानवीय लेगसी प्रोजेक्ट का उदाहरण — स्टाइल न किए गए Human Legacy प्रोजेक्ट का उदाहरण

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

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

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

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

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

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

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

<!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>

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

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

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

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

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

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 की वैल्यू इस तरह की हो सकती हैं:
- "ओवरफ़्लो", अगर किसी इलाके में ज़्यादा कॉन्टेंट है
- "फ़िट", अगर कॉन्टेंट, रीजन के खत्म होने से पहले रुक जाता है
- अगर कॉन्टेंट उस इलाके में उपलब्ध नहीं है, तो "खाली"

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 ने टेक्स्ट और डेस्कटॉप पब्लिशिंग टूल के साथ काफ़ी समय से काम किया है. इसलिए, उसे पता है कि डिज़ाइनर और डेवलपर भी पेजिंग की सामान्य सुविधाओं को आसानी से इस्तेमाल करना चाहेंगे. इसलिए, हम CSS पेज टेंप्लेट नाम के एक प्रस्ताव पर काम कर रहे हैं. इससे पेजिंग के व्यवहार को पूरी तरह से तय किया जा सकता है.

आइए, सीएसएस पेज टेंप्लेट के इस्तेमाल के एक सामान्य उदाहरण पर नज़र डालें. नीचे दिए गए कोड स्निपेट में, "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 के काम के बारे में ज़्यादा जानने के लिए, हंस मुलर की हॉरिज़ॉन्टल बॉक्स: सीएसएस एक्सक्लूज़न के लिए पॉलीगॉन इंटरसेक्शन शीर्षक वाली ब्लॉग पोस्ट पढ़ें.

सीएसएस (कंपैरिज़न शॉपिंग सर्विस) के दायरे में आने वाले इलाकों और सीएसएस से बाहर रखे गए इलाकों की मौजूदा स्थिति

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

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

Android के लिए Chrome पर क्षेत्र — Android के लिए Chrome पर उपलब्ध क्षेत्र

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

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

क्षेत्र और एक्सक्लूज़न की प्रोग्रेस — इलाके और ऐप्लिकेशन उपलब्ध न कराने की स्थिति से जुड़ी प्रोग्रेस

नतीजा

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