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

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

บทนำ

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

ตัวอย่างการยกเว้น CSS
ตัวอย่างการยกเว้น CSS ที่ใช้จริง

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

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

ภูมิภาค CSS

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

การเปิดใช้ภูมิภาค CSS ใน Google Chrome

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

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

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

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

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

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

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

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

ตัวอย่างโปรเจ็กต์เดิมของบุคคลที่ไม่มีการจัดสไตล์
ตัวอย่างโปรเจ็กต์เดิมของบุคคลที่ไม่มีการจัดรูปแบบ

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

โครงการ Human Legacy ที่แสดงภูมิภาค
โปรเจ็กต์เดิมของบุคคลที่มีภูมิภาค

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

โปรเจ็กต์ Human Legacy ที่แสดงภูมิภาค
Human Legacy Project showing Regions

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

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

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

รูปแบบออบเจ็กต์ CSS

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

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

การใช้งานหลักอย่างหนึ่งของ CSSOM คือการฟังเหตุการณ์ webkitregionoversetchange และการเพิ่มหรือนำรีจินออกจาก DOM แบบไดนามิกเพื่อรองรับข้อความที่มีความยาวแตกต่างกัน ตัวอย่างเช่น หากไม่สามารถคาดการณ์จำนวนข้อความที่จะจัดรูปแบบได้ (อาจเป็นข้อความที่ผู้ใช้สร้างขึ้น) หากปรับขนาดหน้าต่างเบราว์เซอร์ หรือหากขนาดแบบอักษรเปลี่ยนแปลง คุณอาจต้องเพิ่มหรือนำภูมิภาคออกเพื่อรองรับการเปลี่ยนแปลงในขั้นตอน นอกจากนี้ หากต้องการจัดระเบียบเนื้อหาเป็นหน้าเว็บ คุณจะต้องมีกลไกในการแก้ไข 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 (หรือที่เรียกว่า polyfill) เพื่อให้คุณทดลองใช้เทมเพลตเหล่านี้ได้ตอนนี้

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

การยกเว้น CSS

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

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

ตัวอย่างการยกเว้น CSS
ตัวอย่างการยกเว้น CSS ที่ใช้จริง

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

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

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

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

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

ครั้งแรกที่ฉันพูดถึงภูมิภาค 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 และการยกเว้น CSS ยังใช้งานได้ในเวอร์ชันตัวอย่างของ Internet Explorer 10 และอยู่ในแผนงานของ Mozilla สำหรับ Firefox ปี 2012 Safari เวอร์ชันหลักเวอร์ชันถัดไปควรรองรับข้อกำหนดส่วนใหญ่ของ CSS Regions และการอัปเดตในภายหลังควรรวมข้อกำหนดที่เหลือ

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

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

บทสรุป

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