เลย์เอาต์คล้ายนิตยสารสำหรับเว็บที่มีภูมิภาค CSS และการยกเว้น

Christian Cantrell
Christian Cantrell
X หน้าแรก

บทนำ

เว็บเป็นแพลตฟอร์มที่มีประสิทธิภาพอย่างยิ่งสำหรับข้อความ ซึ่งเป็นด้านที่ Adobe มีประสบการณ์และความเชี่ยวชาญอย่างมาก เมื่อ Adobe มองหาวิธีช่วยพัฒนาเว็บให้ก้าวหน้า การพัฒนาความสามารถด้านข้อความของเว็บให้ดียิ่งขึ้นจึงดูเหมือนเป็นจุดเริ่มต้นที่ชัดเจนสำหรับเรา โดยทั่วไปแล้ว เว็บจะถือว่าข้อความมีคอลัมน์เดียวและวางแนวตั้ง แม้ว่าจะสามารถจัดข้อความให้ล้อมรอบกราฟิก และจัดรูปแบบข้อความให้เป็นหลายคอลัมน์ด้วย CSS ได้ แต่ก็ยังคงเป็นเรื่องยากมากที่จะได้เลย์เอาต์ที่เหมือนนิตยสารจริงๆ บนเว็บ Adobe เป็นผู้นำในการนำความสามารถของการจัดทำสื่อสิ่งพิมพ์ด้วยคอมพิวเตอร์มาสู่เบราว์เซอร์ที่ทันสมัยด้วย CSS Regions และ CSS Exclusions ตัวอย่างเช่น ในภาพหน้าจอด้านล่าง มีการใช้ CSS Exclusions เพื่อจัดข้อความให้ไหลไปตามแนวภูเขา

ตัวอย่างการใช้การยกเว้น CSS
ตัวอย่างการทำงานของการยกเว้น CSS

เอกสารในภาพหน้าจอด้านล่างยังใช้ CSS Exclusions เพื่อให้ข้อความตัดขึ้นบรรทัดใหม่ตามรูปร่างในรูปภาพ รวมถึงใช้ CSS Regions เพื่อจัดรูปแบบข้อความเป็นคอลัมน์และรอบๆ คำพูดที่ดึงมาด้วย

ตัวอย่างการใช้งานขอบเขต CSS
ตัวอย่างการทำงานของขอบเขต CSS

ภูมิภาค CSS

ก่อนที่จะลงรายละเอียดเกี่ยวกับภูมิภาค CSS เราขออธิบายวิธีเปิดใช้ภูมิภาคใน Google Chrome เมื่อเปิดใช้ขอบเขต CSS แล้ว คุณจะลองใช้ตัวอย่างบางส่วนที่อ้างอิงในบทความนี้และสร้างตัวอย่างของคุณเองได้

การเปิดใช้ขอบเขต CSS ใน Google Chrome

ตั้งแต่ Chrome เวอร์ชัน 20 (เวอร์ชัน 20.0.1132.57) เป็นต้นไป ระบบจะเปิดใช้ขอบเขต CSS ผ่านอินเทอร์เฟซ chrome://flags หากต้องการเปิดใช้ CSS Regions ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิดแท็บหรือหน้าต่างใหม่ใน Chrome
  2. พิมพ์ chrome://flags ในแถบตำแหน่ง
  3. ใช้ค้นหาในหน้า (control/command + f) และค้นหาส่วน "experimental Web Platform features"
  4. คลิกลิงก์เปิดใช้
  5. คลิกปุ่มเปิดอีกครั้งเลยที่ด้านล่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับแฟล็กของ Chrome ได้ที่บล็อกโพสต์ข้อมูลทั้งหมดเกี่ยวกับแฟล็กของ Chrome

เมื่อเปิดเบราว์เซอร์อีกครั้งแล้ว คุณจะเริ่มทดลองใช้ขอบเขต CSS ได้อย่างอิสระ

ภาพรวมของขอบเขต CSS

ขอบเขต CSS ช่วยให้บล็อกข้อความที่มาร์กอัปตามความหมายไหลเข้าสู่ "กล่อง" (องค์ประกอบปัจจุบัน) โดยอัตโนมัติ แผนภาพด้านล่างแสดงการแยกข้อความ (โฟลว์) และกล่อง (ขอบเขตที่ข้อความไหลเข้าไป)

เนื้อหาจะไหลเข้าสู่ขอบเขตที่กำหนดไว้
เนื้อหาจะไหลไปยังขอบเขตที่กำหนดไว้

มาดูตัวอย่างกรณีการใช้งานจริงของ CSS Regions กัน นอกจากจะเป็นนักพัฒนาซอฟต์แวร์ที่ Adobe แล้ว ฉันยังเป็นนักเขียนนิยายวิทยาศาสตร์ด้วย ฉันเผยแพร่ผลงานทางออนไลน์ภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์ (Creative Commons License) อยู่บ่อยครั้ง และเพื่อให้ผลงานทำงานได้ในอุปกรณ์และเบราว์เซอร์จำนวนมากที่สุด ฉันจึงมักใช้รูปแบบที่เรียบง่ายอย่างยิ่งซึ่งคล้ายกับรูปแบบต่อไปนี้

ตัวอย่างโครงการ Unstyled Human Legacy
ตัวอย่างโปรเจ็กต์ Human Legacy ที่ไม่มีการจัดรูปแบบ

การใช้ CSS Regions ช่วยให้ฉันสร้างประสบการณ์ที่น่าสนใจยิ่งขึ้นทั้งในด้านภาพและฟังก์ชันการทำงาน เนื่องจากไปยังส่วนต่างๆ ได้ง่ายขึ้นและอ่านได้สบายตามากขึ้น

Human Legacy Project แสดงภูมิภาค
Human Legacy Project with Regions

เพื่อวัตถุประสงค์ในการสาธิต ฉันได้เพิ่มความสามารถในการแสดงขอบเขต CSS ในต้นแบบนี้ ภาพหน้าจอด้านล่างแสดงวิธีจัดเรียงขอบเขตเพื่อให้ดูเหมือนเป็นคอลัมน์ที่ล้อมรอบกราฟิกและข้อความที่ดึงมาแสดงตรงกลาง

Human Legacy Project แสดงภูมิภาค
Human Legacy Project แสดงภูมิภาคต่างๆ

คุณทดลองใช้ต้นแบบนี้ (รวมถึงดูซอร์สโค้ด) ได้ที่นี่ ใช้ปุ่มลูกศรเพื่อไปยังส่วนต่างๆ และกดปุ่ม Esc เพื่อแสดงภูมิภาค นอกจากนี้ คุณยังดูต้นแบบก่อนหน้านี้ได้ที่นี่

การสร้างโฟลว์ที่มีชื่อ

CSS ที่จำเป็นสำหรับการทำให้บล็อกข้อความไหลผ่านขอบเขตต่างๆ นั้นง่ายมาก ข้อมูลโค้ดด้านล่างจะกำหนดโฟลว์ที่มีชื่อว่า "article" ให้กับ div ที่มีรหัส "content" และกำหนดโฟลว์ที่มีชื่อว่า "article" เดียวกันนั้นให้กับองค์ประกอบใดๆ ที่มีคลาส "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>

ผลลัพธ์จะมีลักษณะดังนี้

ผลลัพธ์ของโค้ดด้านบน
ผลลัพธ์ของโค้ดด้านบน

โปรดทราบว่าข้อความภายใน div "เนื้อหา" ไม่มีความรู้เกี่ยวกับการนำเสนอ กล่าวคือ ข้อมูลจะยังคงความหมายเดิมไว้ได้อย่างสมบูรณ์แม้ว่าจะส่งผ่านภูมิภาคต่างๆ นอกจากนี้ เนื่องจากขอบเขตเป็นเพียงองค์ประกอบ จึงมีการจัดตำแหน่งและปรับขนาดโดยใช้ CSS เช่นเดียวกับองค์ประกอบอื่นๆ และเข้ากันได้อย่างสมบูรณ์กับหลักการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ การกำหนดองค์ประกอบเป็นส่วนหนึ่งของโฟลว์ที่มีชื่อหมายความว่าข้อความที่ระบุจะไหลผ่านองค์ประกอบเหล่านั้นโดยอัตโนมัติ

CSS Object Model

CSS Object Model หรือ CSSOM จะกำหนด JavaScript API สำหรับการทำงานกับ CSS ด้านล่างนี้คือรายการ API ใหม่ที่เกี่ยวข้องกับ CSS Regions

  • document.webkitGetNamedFlows(): ฟังก์ชันที่แสดงผลคอลเล็กชันของโฟลว์ที่มีชื่อซึ่งพร้อมใช้งานในเอกสาร
  • document.webkitGetNamedFlows().namedItem("article"): ฟังก์ชันที่แสดงผลการอ้างอิงไปยังโฟลว์ที่มีชื่อเฉพาะ อาร์กิวเมนต์จะสอดคล้องกับชื่อที่ระบุเป็นค่าของพร็อพเพอร์ตี้ CSS flow-into และ from-from หากต้องการรับการอ้างอิงไปยังโฟลว์ที่มีชื่อซึ่งระบุไว้ในข้อมูลโค้ดด้านบน คุณจะต้องส่งสตริง "article"
  • WebKitNamedFlow: การแสดงออบเจ็กต์ของ Floe ที่มีชื่อซึ่งมีพร็อพเพอร์ตี้และฟังก์ชันต่อไปนี้
    • firstEmptyRegionIndex: ค่าจำนวนเต็มที่ชี้ไปยังดัชนีของขอบเขตว่างแรกที่เชื่อมโยงกับโฟลว์ที่มีชื่อ ดู getRegions() ด้านล่างเพื่อดูวิธีรับคอลเล็กชันของภูมิภาค
    • name: ค่าสตริงที่มีชื่อของโฟลว์
    • overset: พร็อพเพอร์ตี้บูลีนที่มีลักษณะดังนี้
      • false เมื่อเนื้อหาของโฟลว์ที่มีชื่อพอดีกับขอบเขตที่เกี่ยวข้อง
      • true เมื่อเนื้อหาไม่พอดีและต้องใช้ขอบเขตเพิ่มเติมเพื่อรวมเนื้อหาทั้งหมด
    • getContent(): ฟังก์ชันที่แสดงผลคอลเล็กชันที่มีการอ้างอิงไปยังโหนดที่ไหลเข้าสู่โฟลว์ที่มีชื่อ
    • getRegions(): ฟังก์ชันที่แสดงผลคอลเล็กชันที่มีการอ้างอิงไปยังขอบเขตที่มีเนื้อหาของโฟลว์ที่มีชื่อ
    • getRegionsByContentNode(node): ฟังก์ชันที่แสดงผลการอ้างอิงไปยังขอบเขตที่มีโหนดที่ระบุ ซึ่งจะเป็นประโยชน์อย่างยิ่งในการค้นหาขอบเขตที่มีสิ่งต่างๆ เช่น Anchor ที่มีชื่อ
  • webkitregionoversetchange เหตุการณ์ เหตุการณ์นี้จะทริกเกอร์ใน WebkitNamedFlow เมื่อใดก็ตามที่เลย์เอาต์ของเนื้อหาที่เกี่ยวข้องมีการเปลี่ยนแปลงไม่ว่าด้วยเหตุผลใดก็ตาม (มีการเพิ่มหรือนำเนื้อหาออก ขนาดแบบอักษรเปลี่ยนแปลง รูปร่างของขอบเขตเปลี่ยนแปลง ฯลฯ) และทำให้พร็อพเพอร์ตี้ webkitRegionOverset ของขอบเขตเปลี่ยนแปลง เหตุการณ์นี้มีประโยชน์สำหรับการฟังการเปลี่ยนแปลงเลย์เอาต์แบบคร่าวๆ ซึ่งเป็นตัวบ่งชี้ว่ามีเหตุการณ์สำคัญเกิดขึ้นและเลย์เอาต์อาจต้องดำเนินการ เช่น ต้องมีภูมิภาคเพิ่มเติม บางภูมิภาคอาจว่างเปล่า เป็นต้น
  • webkitregionfragmentchange เหตุการณ์ ยังไม่ได้นำไปใช้ในขณะที่ทำการแก้ไขนี้ เหตุการณ์นี้จะทริกเกอร์ใน WebkitNamedFlow เมื่อใดก็ตามที่เลย์เอาต์ของเนื้อหาที่เกี่ยวข้องมีการเปลี่ยนแปลงไม่ว่าด้วยเหตุผลใดก็ตาม ซึ่งคล้ายกับ webkitregionoversetchange แต่ไม่คำนึงถึงการเปลี่ยนแปลงใดๆ ในพร็อพเพอร์ตี้ webkitRegionOverset เหตุการณ์นี้มีประโยชน์สำหรับการฟังการเปลี่ยนแปลงเลย์เอาต์แบบละเอียดซึ่งไม่จำเป็นต้องส่งผลกระทบต่อเลย์เอาต์ทั้งหมดของโฟลว์ที่มีชื่อ เช่น เนื้อหาย้ายจากภูมิภาคหนึ่งไปยังอีกภูมิภาคหนึ่ง แต่เนื้อหาโดยรวมยังคงพอดีกับทุกภูมิภาค
  • Element.webkitRegionOverset: องค์ประกอบจะกลายเป็นขอบเขตเมื่อมีการกำหนดพร็อพเพอร์ตี้ CSS flow-from องค์ประกอบเหล่านี้มีพร็อพเพอร์ตี้ webkitRegionOverset ซึ่งหากเป็นส่วนหนึ่งของโฟลว์ที่มีชื่อ จะระบุว่าเนื้อหาจากโฟลว์ล้นเกินขอบเขตหรือไม่ ค่าที่เป็นไปได้ของ webkitRegionOverset มีดังนี้
    • "overflow" หากมีเนื้อหามากกว่าที่ภูมิภาคจะรองรับได้
    • "fit" หากเนื้อหาหยุดก่อนสิ้นสุดขอบเขต
    • "empty" หากเนื้อหายังไม่ถึงภูมิภาค

การใช้งานหลักอย่างหนึ่งของ 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.
}

ดูการสาธิตเพิ่มเติมได้ที่หน้าตัวอย่างขอบเขต CSS

เทมเพลตหน้า CSS

การใช้ประโยชน์จาก CSSOM อาจเป็นวิธีที่มีประสิทธิภาพและยืดหยุ่นที่สุดในการใช้สิ่งต่างๆ เช่น การแบ่งหน้าและเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ แต่ Adobe ได้ทำงานกับเครื่องมือการจัดพิมพ์ข้อความและเดสก์ท็อปมานานพอที่จะทราบว่านักออกแบบและนักพัฒนาซอฟต์แวร์ก็ต้องการวิธีที่ง่ายกว่าในการรับความสามารถในการแบ่งหน้าแบบทั่วไป ดังนั้นเราจึงกำลังดำเนินการตามข้อเสนอที่เรียกว่าเทมเพลตหน้า CSS ซึ่งช่วยให้กำหนดลักษณะการทำงานของการแบ่งหน้าได้อย่างชัดเจน

มาดูกรณีการใช้งานทั่วไปของเทมเพลตหน้า CSS กัน ข้อมูลโค้ดด้านล่างแสดงการใช้ CSS เพื่อสร้างโฟลว์ที่มีชื่อ 2 รายการ ได้แก่ "article-flow" และ "timeline-flow" นอกจากนี้ ยังกำหนดตัวเลือกที่ 3 ที่เรียกว่า "combined-articles" ซึ่งจะรวมทั้ง 2 โฟลว์ไว้ภายใน การใส่พร็อพเพอร์ตี้ overflow-style ไว้ในตัวเลือก "combined-articles" บ่งบอกว่าเนื้อหาควรแบ่งหน้าตามแกน 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" ใหม่ ในข้อมูลโค้ดด้านบน เรากำหนดช่องโฆษณา 3 ช่อง โดยแต่ละช่องจะสอดคล้องกับคอลัมน์หนึ่งๆ ข้อความจาก "article-flow" จะไหลผ่านคอลัมน์ทางซ้ายและขวา และข้อความจาก "timeline-flow" จะแสดงในคอลัมน์ตรงกลาง ผลลัพธ์ที่ได้อาจออกมาเป็นแบบนี้

ตัวอย่างเทมเพลตของหน้าเว็บ
ตัวอย่างเทมเพลตหน้าเว็บ

โปรดทราบว่าข้อความในบทความ ซึ่งก็คือข้อความในคอลัมน์ด้านซ้ายและขวาเป็นภาษาอังกฤษ และไทม์ไลน์ตรงกลางเป็นภาษาเยอรมัน นอกจากนี้ เอกสารยังแบ่งหน้าในแนวนอนโดยไม่ต้องใช้โค้ด JavaScript ใดๆ ทุกอย่างทำใน CSS ทั้งหมด

เทมเพลตหน้า CSS ยังคงเป็นข้อเสนอ แต่เรามีต้นแบบที่ใช้ JavaScript "shim" (หรือที่เรียกว่า polyfill) เพื่อให้คุณทดสอบได้ในตอนนี้

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับขอบเขต CSS โดยทั่วไป โปรดไปที่หน้าขอบเขต CSS ใน html.adobe.com

การยกเว้น CSS

เพื่อให้ได้เลย์เอาต์ที่เหมือนนิตยสารอย่างแท้จริง การจัดข้อความให้ไหลไปตามขอบเขตต่างๆ นั้นยังไม่เพียงพอ องค์ประกอบสำคัญของการจัดพิมพ์ด้วยคอมพิวเตอร์ที่มีคุณภาพสูงและน่าสนใจคือความสามารถในการทำให้ข้อความไหลไปรอบๆ หรือภายในกราฟิกและรูปร่างที่ไม่สม่ำเสมอ CSS Exclusions จะนำคุณภาพการผลิตระดับนี้มาสู่เว็บ

ภาพหน้าจอด้านล่างมาจากต้นแบบ CSS Exclusions และแสดงข้อความที่ไหลไปตามเส้นทางที่ตรงกับรูปร่างของหินก้อนใหญ่แบบไดนามิก

ตัวอย่างการใช้การยกเว้น CSS
ตัวอย่างการทำงานของการยกเว้น CSS

ภาพหน้าจอถัดไปแสดงภาพตรงกันข้าม ซึ่งก็คือข้อความที่ไหลอยู่ภายในรูปหลายเหลี่ยมที่มีรูปร่างไม่สม่ำเสมอ

ข้อความที่ไหลเข้าไปในรูปหลายเหลี่ยมที่มีรูปร่างไม่สม่ำเสมอ
ข้อความที่ไหลเข้าไปในรูปหลายเหลี่ยมที่มีรูปร่างไม่สม่ำเสมอ

ขั้นตอนแรกในการทำให้ข้อความไหลไปรอบๆ หรือภายในรูปร่างที่กำหนดเองคือการพัฒนาและเพิ่มประสิทธิภาพอัลกอริทึมที่จำเป็น ปัจจุบัน Adobe กำลังดำเนินการติดตั้งใช้งานซึ่งจะส่งไปยัง WebKit โดยตรง เมื่ออัลกอริทึมเหล่านี้ได้รับการเพิ่มประสิทธิภาพแล้ว ก็จะกลายเป็นรากฐานที่ใช้สร้างการยกเว้น CSS ที่เหลือ

ดูข้อมูลเพิ่มเติมเกี่ยวกับการยกเว้น CSS ได้ที่หน้าการยกเว้น CSS ใน html.adobe.com และดูรายละเอียดเพิ่มเติมเกี่ยวกับงานของ Adobe ในเทคโนโลยีพื้นฐานสำหรับการยกเว้น CSS ได้ที่บล็อกโพสต์ของ Hans Muller ที่ชื่อว่า Horizontal Box: Polygon Intersection for CSS Exclusions

สถานะของ CSS Regions และ CSS Exclusions (2012)

ครั้งแรกที่ฉันพูดถึงขอบเขต CSS และการยกเว้น CSS ต่อสาธารณะคือที่ Adobe Developer Pod ในงาน Google I/O 2011 ตอนนั้นผมกำลังสาธิตการใช้งานในเบราว์เซอร์ต้นแบบที่เราสร้างขึ้นเอง การตอบรับนั้นเป็นไปอย่างกระตือรือร้นอย่างยิ่ง อย่างไรก็ตาม มีความผิดหวังที่เห็นได้ชัดเมื่อผู้สังเกตการณ์พบว่าฟังก์ชันการทำงานที่ฉันแสดงนั้นยังไม่มีให้บริการในเบราว์เซอร์หลักๆ เลย

ผมได้ไปร่วมงาน Google I/O อีกครั้งในปีนี้ (2012) โดยครั้งนี้ไปในฐานะผู้นำเสนอร่วมกับเพื่อนร่วมงาน Vincent Hardy และ Alex Danilo จาก Google (คุณดูการนำเสนอได้ที่นี่) เพียง 1 ปีต่อมา ข้อกำหนด CSS Regions ประมาณ 80% ได้รับการนำไปใช้ใน WebKit และอยู่ใน Google Chrome เวอร์ชันล่าสุดแล้ว (โปรดทราบว่าปัจจุบันต้องเปิดใช้ CSS Regions ผ่าน chrome://flags) การรองรับ CSS Regions เบื้องต้นได้เปิดตัวใน Chrome สำหรับ Android แล้ว

ภูมิภาคใน Chrome สำหรับ Android
ภูมิภาคใน Chrome สำหรับ Android

นอกจากนี้ ทั้ง CSS Regions และ CSS Exclusions ยังมีการใช้งานในเวอร์ชันตัวอย่างของ Internet Explorer 10 และปัจจุบันอยู่ในแผนกลยุทธ์ปี 2012 ของ Mozilla สำหรับ Firefox Safari เวอร์ชันหลักถัดไปควรรองรับข้อกำหนดเฉพาะของ CSS Regions ส่วนใหญ่ และการอัปเดตต่อๆ ไปควรมีส่วนที่เหลือ

ด้านล่างนี้คือไทม์ไลน์โดยละเอียดของความคืบหน้าเกี่ยวกับขอบเขต CSS และการยกเว้น CSS นับตั้งแต่ข้อเสนอแรกของเราต่อ W3C ในเดือนเมษายน 2011

ความคืบหน้าของภูมิภาคและการยกเว้น
ความคืบหน้าของภูมิภาคและการยกเว้น

บทสรุป

Adobe มีประสบการณ์มากมายเกี่ยวกับข้อความ แบบอักษร และการจัดทำสื่อสิ่งพิมพ์โดยทั่วไปผ่านเครื่องมืออย่าง InDesign แม้ว่าเว็บจะเป็นแพลตฟอร์มที่มีประสิทธิภาพมากสำหรับข้อความอยู่แล้ว แต่เราต้องการใช้ความรู้และประสบการณ์ของเราเพื่อผลักดันการนำเสนอข้อความให้ดียิ่งขึ้นไปอีก ขอบเขต CSS และการยกเว้น CSS ช่วยให้เนื้อหายังคงมีโครงสร้างตามความหมาย ขณะเดียวกันก็ช่วยให้เลย์เอาต์เหมือนนิตยสารจริง และท้ายที่สุดก็ทำให้เว็บสื่อความหมายได้มากขึ้น