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

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

Christian Cantrell

शुरुआती जानकारी

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

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

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

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

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

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

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

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

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

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

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

तय किए गए देशों/इलाकों में कॉन्टेंट का फ़्लो — कॉन्टेंट, तय किए गए देशों/इलाकों में उपलब्ध है

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

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

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

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

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

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

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

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

CSS ऑब्जेक्ट मॉडल

ध्यान दें: कम शब्दों में कहें, तो इस सेक्शन में सिर्फ़ एक वेंडर प्रीफ़िक्स (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 इवेंट सुनना और अलग-अलग टेक्स्ट को शामिल करने के लिए डायनैमिक रूप से जोड़ना या हटाना है. उदाहरण के लिए, अगर फ़ॉर्मैट किए जाने वाले टेक्स्ट की संख्या (शायद उपयोगकर्ता की जनरेट की गई) के हिसाब से नहीं है, तो ब्राउज़र विंडो का साइज़ बदलने या फ़ॉन्ट के साइज़ में बदलाव होने पर, इस बदलाव के हिसाब से क्षेत्रों को जोड़ना या हटाना ज़रूरी हो सकता है. इसके अलावा, अगर आपको अपने कॉन्टेंट को पेजों में व्यवस्थित करना है, तो आपको DOM के साथ-साथ अपने क्षेत्रों में डाइनैमिक तौर पर बदलाव करने के लिए एक तरीके की ज़रूरत होगी.

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

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.
}

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

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

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

सीएसएस पेज टेंप्लेट के इस्तेमाल के सामान्य उदाहरण पर नज़र डालें. नीचे दिया गया कोड स्निपेट दो नाम वाले फ़्लो बनाने के लिए, सीएसएस का इस्तेमाल दिखाता है: "article-flow" और "timeline-flow". इसके अलावा, यह "संयुक्त-लेख" नाम के एक तीसरे सिलेक्टर को तय करता है, जिसमें दोनों फ़्लो शामिल होंगे. "संयुक्त-लेख" सिलेक्टर में 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" सिंटैक्स का इस्तेमाल करके तय किया जाता है. ऊपर दिए गए कोड स्निपेट में, हम तीन स्लॉट तय करते हैं जिनमें से हर एक कॉलम के हिसाब से होता है. "आर्टिकल-फ़्लो" का टेक्स्ट बाईं और दाईं ओर मौजूद कॉलम से होकर गुज़रेगा. "टाइमलाइन-फ़्लो" का टेक्स्ट, कॉलम के बीच में अपने-आप भर जाएगा. नतीजा कुछ ऐसा दिख सकता है:

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

सीएसएस पेज टेंप्लेट अब भी एक प्रस्ताव है. हालांकि, हमारे पास एक ऐसा प्रोटोटाइप है जिसमें JavaScript "शिम" (यानी polyfill भी कहा जाता है) का इस्तेमाल किया जाता है, ताकि आप इनके साथ अभी प्रयोग कर सकें.

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

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

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

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

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

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

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

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

सीएसएस क्षेत्रों और सीएसएस एक्सक्लूज़न की मौजूदा स्थिति

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

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

Android के लिए, Chrome पर इलाके — Android के लिए Chrome पर क्षेत्र

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

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

नतीजा

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