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

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

เกริ่นนำ

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

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

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

ตัวอย่างการทำงานของภูมิภาค CSS
ตัวอย่างการใช้งานจริงของภูมิภาค CSS

ภูมิภาค CSS

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

การเปิดใช้งาน CSS Regions ใน Google Chrome

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

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแฟล็กของ Chrome โปรดดูบล็อกโพสต์ของฉันในหัวข้อทั้งหมดเกี่ยวกับ Chrome Flag

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

ภาพรวมของภูมิภาค CSS

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

เนื้อหาไหลเข้าสู่ภูมิภาคที่กำหนด
เนื้อหาไหลเข้าสู่ภูมิภาคที่กำหนด

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

ตัวอย่างโปรเจ็กต์มรดกมนุษย์ที่ไม่มีสไตล์
ตัวอย่างโปรเจ็กต์มนุษย์เดิมที่ไม่มีสไตล์

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

โครงการมรดกทางวัฒนธรรมที่แสดงภูมิภาค
โครงการมนุษย์เดิมที่มีภูมิภาคต่างๆ

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

โครงการมรดกทางวัฒนธรรมที่แสดงภูมิภาค
โปรเจ็กต์มนุษย์เดิมที่แสดงภูมิภาคต่างๆ

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

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

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

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

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

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

โมเดลออบเจ็กต์ CSS

รูปแบบออบเจ็กต์ CSS หรือ CSSOM จะกำหนด JavaScript API สำหรับการทำงานกับ CSS ด้านล่างนี้เป็นรายการ API ใหม่ที่เกี่ยวข้องกับภูมิภาค CSS

  • document.webkitGetNamedFlows(): ฟังก์ชันที่แสดงผลคอลเล็กชันของโฟลว์ที่มีชื่อซึ่งมีอยู่ในเอกสาร
  • document.webkitGetNamedFlows().namedItem("article"): ฟังก์ชันที่แสดงผลการอ้างอิงไปยังขั้นตอนที่ตั้งชื่อที่เฉพาะเจาะจง อาร์กิวเมนต์สอดคล้องกับชื่อที่ระบุเป็นค่าของพร็อพเพอร์ตี้ CSS flow-into และ from-from หากต้องการรับการอ้างอิงไปยังขั้นตอนที่ตั้งชื่อซึ่งระบุไว้ในข้อมูลโค้ดด้านบน คุณจะต้องส่งในสตริง "บทความ"
  • 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" หากเนื้อหาหยุดก่อนสิ้นสุดภูมิภาค
    • "เว้นว่าง" หากเนื้อหายังไปไม่ถึงภูมิภาค

การใช้งานหลักอย่างหนึ่งสำหรับ 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 ลำดับ นั่นคือ "โฟลว์บทความ" และ "โฟลว์ไทม์ไลน์" นอกจากนี้ ยังกำหนดตัวเลือกที่ 3 ที่เรียกว่า "บทความแบบรวม" ซึ่งจะอยู่ในขั้นตอนทั้ง 2 นี้ การรวมพร็อพเพอร์ตี้ 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 ใดๆ อีกด้วย ทุกอย่างดำเนินการอย่างชัดเจนใน CSS

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

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

การยกเว้น CSS

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

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

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

ภาพผกผันในภาพหน้าจอถัดไป ได้แก่ ข้อความที่ไหลอยู่ภายในรูปหลายเหลี่ยมที่มีรูปร่างผิดปกติ

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

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

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

สถานะปัจจุบันของภูมิภาค CSS และการยกเว้น CSS

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

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

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

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

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

ความคืบหน้าเกี่ยวกับภูมิภาคและการยกเว้น
ความคืบหน้าเกี่ยวกับภูมิภาคและการยกเว้น

บทสรุป

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