มีอะไรใหม่ในเว็บ

Rachel Andrew

เผยแพร่: 20 พฤษภาคม 2025

ในงาน Google I/O 2025 การกล่าวเปิดงาน "มีอะไรใหม่ในเว็บ" ได้แชร์ประกาศทั้งหมดเกี่ยวกับ Baseline พร้อมทั้งดูฟีเจอร์บางส่วนที่กลายเป็น ส่วนหนึ่งของ Baseline ในปีนี้ ปีนี้เป็นปีที่ยอดเยี่ยมสำหรับเว็บและสำหรับ Baseline โพสต์นี้เป็นการสรุปทุกสิ่งที่กล่าวถึง พร้อมลิงก์ทั้งหมดเพื่อดูข้อมูลเพิ่มเติม

แดชบอร์ดแพลตฟอร์มเว็บและฟีเจอร์เว็บ

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

ตอนนี้ข้อมูลฟีเจอร์บนเว็บ สมบูรณ์แล้ว โดยมีการแมปฟีเจอร์ทั้งหมดของแพลตฟอร์ม เมื่อมีฟีเจอร์ใหม่ๆ เพิ่มเข้ามาใน Baseline ทุกเดือน ระบบจะอัปเดตข้อมูลและแสดงข้อมูลทั้งหมดนี้ใน แดชบอร์ด

เครื่องมือที่จะช่วยให้คุณค้นพบเป้าหมายพื้นฐานของตัวเอง

แม้ว่าคุณอาจกำหนดนโยบายการรองรับเบราว์เซอร์ตามเป้าหมายที่เปลี่ยนแปลงอยู่เสมอของ Baseline Widely available เช่น เอเจนซี Clearleft ในสหราชอาณาจักร แต่คุณก็สามารถใช้เป้าหมายที่แน่นอน ตามปีของ Baseline ได้เช่นกัน ตอนนี้คุณสามารถใช้ข้อมูลผู้ใช้ของคุณเองร่วมกับข้อมูลฟีเจอร์บนเว็บเพื่อกำหนดเป้าหมายที่ดีที่สุดสำหรับคุณ

เมื่อปีที่แล้วในงาน I/O เราได้ประกาศว่า RUMvision จะใช้ Baseline ในผลิตภัณฑ์ของตน และตอนนี้การผสานรวมนี้พร้อมใช้งานแล้ว

เนื่องจากใช้ข้อมูล RUM จึงช่วยให้คุณระบุปีพื้นฐานที่จะใช้ได้ โดยอิงตามข้อมูลดังกล่าวแทนที่จะเป็นค่าเฉลี่ยทั่วโลก นอกจากนี้ ยังช่วยให้คุณพิจารณาได้ว่า Baseline Widely available เหมาะกับคุณหรือไม่

นอกจากนี้ คุณยังใช้ข้อมูล Google Analytics เพื่อดูเปอร์เซ็นต์ของผู้ใช้ที่สนับสนุนเป้าหมายพื้นฐานแต่ละรายการได้อย่างชัดเจนด้วยเครื่องมือตรวจสอบพื้นฐานของ Google Analytics ใหม่

นี่เป็นเพียง 2 เครื่องมือจากชุดเครื่องมือที่เพิ่มขึ้นเรื่อยๆ ซึ่งจะช่วยคุณในการแมป ข้อมูลผู้ใช้จริงกับค่าพื้นฐาน

เมื่อเร็วๆ นี้ กลุ่มชุมชน Web DX ได้เปิดตัว ส่วนขยายสำหรับ Netlify ที่แสดงการรองรับ ปีของ Baseline ที่แตกต่างกันและพร้อมใช้งานอย่างแพร่หลายในเว็บไซต์ของคุณเพื่อช่วยให้คุณตัดสินใจได้ ว่าจะกำหนดเป้าหมายอะไรในเครื่องมือบิลด์ การผสานรวมกับผลิตภัณฑ์ RUM ของ Observatory จาก Cloudflare และ Contentsquare จะพร้อมให้บริการในเร็วๆ นี้

ผสานรวมข้อมูลกับเครื่องมือของคุณเอง

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

ใช้ Web Platform Dashboard API หรือใช้ข้อมูลฟีเจอร์เว็บโดยตรงจากแพ็กเกจ npm

ตอนนี้คุณสามารถจับคู่เวอร์ชันเบราว์เซอร์กับเป้าหมายพื้นฐานได้โดยใช้โมดูล baseline-browser-mapping จากกลุ่มชุมชน W3C WebDX โมดูลนี้สามารถใช้ได้ทั้งในสภาพแวดล้อม JavaScript ฝั่งเซิร์ฟเวอร์ หรือโดยการดาวน์โหลดไฟล์ JSON หรือ CSV ที่รีเฟรชทุกวันจากที่เก็บ

ข้อมูลนี้รวมถึงการแมปไม่เพียงแต่สำหรับชุดเบราว์เซอร์พื้นฐานหลักเท่านั้น แต่ยังรวมถึง เบราว์เซอร์ดาวน์สตรีม เช่น Samsung Internet, Opera, UC Browser และ Android WebView ด้วย

ดูว่าเป้าหมายพื้นฐานรองรับฟีเจอร์หรือไม่

ขณะนี้ข้อมูลพื้นฐานอยู่ในหน้า MDN และ Can I Use ส่วนใหญ่ คุณยังดูข้อมูลนี้ได้ในแดชบอร์ดแพลตฟอร์มเว็บ รวมถึงในบทความบน web.dev และ CSS Tricks อย่างไรก็ตาม คุณจะต้องค้นหาการสนับสนุน การแสดงข้อมูลพื้นฐานใน IDE ขณะที่คุณเขียนโค้ดและเป็นส่วนหนึ่งของเครื่องมืออื่นๆ ทั้งหมดที่คุณใช้จะมีประโยชน์มากกว่ามาก

เรายินดีที่จะแจ้งให้ทราบว่าขณะนี้เครื่องมือสำคัญหลายอย่างรองรับ Baseline ในตัวหรือผสานรวมได้อย่างง่ายดาย

browserslist-config-baseline

เครื่องมือหลายอย่าง เช่น Babel และ PostCSS ใช้ Browserslist เพื่อพิจารณาว่าจะรองรับเบราว์เซอร์ใด

ทีม Chrome ร่วมกับ WebDX CG และสมาชิกในชุมชนได้ช่วยกัน เปิดตัวเครื่องมือใหม่ที่ชื่อว่า browserslist-config-baseline ซึ่งจะช่วยให้คุณกำหนดค่าเป้าหมาย Browserslist ในข้อกำหนดพื้นฐาน เช่น พร้อมใช้งานอย่างแพร่หลายหรือปีพื้นฐาน

ด้วยวิธีนี้ เครื่องมือใดก็ตามที่ใช้เป้าหมาย Browserslist จะแสดงใน รูปแบบของ Baseline ได้แล้ว

ดูข้อมูลเพิ่มเติมได้ที่ใช้ Baseline กับ Browserslist

ค่าพื้นฐานในเครื่องมือวิเคราะห์โค้ด - ESLint และ Stylelint

เมื่อเร็วๆ นี้ เราได้เพิ่มเครื่องมือใหม่ 2-3 อย่างในส่วนของ Linter ซึ่งช่วยให้ใช้ Baseline กับ Linter ได้ โดยเริ่มจาก ESLint สำหรับ CSS

ESLint พื้นฐานมีกฎ use-baseline คุณสามารถตั้งค่านี้เป็นเป้าหมายพื้นฐานที่ต้องการได้ และระบบจะเตือนคุณเมื่อใช้ฟีเจอร์ที่ใหม่กว่าเป้าหมาย คุณเลือกวิธีแก้ไขคำเตือนเหล่านั้นได้ ไม่ว่าจะด้วยการแทนที่ฟีเจอร์นั้นด้วยองค์ประกอบพื้นฐาน หรือด้วยการระงับคำเตือนของ Linter ซึ่งเป็นวิธีแก้ปัญหาที่ถูกต้องอย่างยิ่งในกรณีที่คุณทราบว่ากำลังใช้ฟีเจอร์ที่ล้ำสมัยอย่างปลอดภัย เช่น หากเป็นฟีเจอร์ที่ใช้การเพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไป

โดยค่าเริ่มต้น ESLint จะไม่แสดงคำเตือนหากมีการใช้ฟีเจอร์ใหม่กว่าภายในบล็อก @supports เนื่องจากเบราว์เซอร์ที่ไม่รองรับจะไม่ประเมินฟีเจอร์เหล่านั้นอยู่แล้ว

หากต้องการใช้เครื่องมือตรวจสอบ HTML ก็มีปลั๊กอินชุมชนชื่อ html-eslint ด้วย

Stylelint รองรับปลั๊กอินชื่อ stylelint-plugin-use-baseline อย่างเป็นทางการ กฎนี้ทำงานเหมือนกับกฎ ESLint สำหรับ CSS แต่จะทำงานใน Stylelint แทน

นอกจากนี้ Linter หลายตัวยังมีปลั๊กอิน IDE ด้วย คุณจึงรับความคิดเห็นเกี่ยวกับ สถานะของ Baseline ได้ทันทีขณะเขียนโค้ดโดยใช้ขีดเส้นใต้หยึกหยัก

เกณฑ์พื้นฐานใน VS Code และ JetBrains WebStorm

IDE หลายรายการรองรับวิธีวางเมาส์เหนือฟีเจอร์ในเอดิเตอร์และดูรายการเวอร์ชันเบราว์เซอร์ที่รองรับมานานแล้ว

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

เราจึงได้ร่วมมือกับ VS Code ซึ่งเป็น IDE ที่ได้รับความนิยมมากที่สุดที่นักพัฒนาเว็บหลายล้านคนใช้ เพื่อผสานรวมข้อมูล Baseline เข้ากับโฮเวอร์การ์ดเหล่านี้โดยตรง

ตอนนี้คุณสามารถวางเมาส์เหนือฟีเจอร์เพื่อดูว่าระบบถือว่าฟีเจอร์นั้นเป็นฟีเจอร์พื้นฐานหรือไม่ และเป็นฟีเจอร์พื้นฐานนานเท่าใด หรือมีเบราว์เซอร์หลักใดบ้างที่ยังไม่ได้ใช้ฟีเจอร์นั้นอย่างเต็มรูปแบบ

ฟีเจอร์ที่รองรับ ได้แก่ พร็อพเพอร์ตี้ CSS, องค์ประกอบ HTML และแอตทริบิวต์ HTML ดูข้อมูลเพิ่มเติมได้ที่ ตอนนี้ Visual Studio Code รองรับ Baseline แล้ว

การผสานรวมนี้หมายความว่า IDE ใดๆ ที่อิงตาม VS Code จะได้รับประโยชน์จาก การ์ดข้อมูลแบบลอยเหล่านี้ด้วย

นอกจากนี้ เรายังประกาศได้ว่า JetBrains กำลังจะนำการ์ดข้อความเมื่อวางเมาส์ไปใช้ใน IDE ของ JavaScript และ TypeScript ใน WebStorm

เว็บกำลังได้รับการปรับปรุงอย่างรวดเร็วกว่าที่เคย

เราหวังว่า Baseline จะช่วยให้คุณใช้ประโยชน์จากข้อเท็จจริงที่ว่าเว็บที่ทำงานร่วมกันได้กำลังได้รับการปรับปรุงเร็วกว่าที่เคย

คุณสามารถใช้แดชบอร์ดแพลตฟอร์มเว็บเพื่อดูฟีเจอร์ทั้งหมดที่กลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่ในช่วง 12 เดือนที่ผ่านมานับตั้งแต่ Google I/O 2024

นอกจากนี้ ยังมีฟีเจอร์อีกหลายอย่างที่คุณมั่นใจได้ว่าจะพร้อมใช้งานใน Baseline Newly เร็วๆ นี้ เนื่องจากรวมอยู่ในโปรเจ็กต์ Interop 2025 คุณสามารถอ่านเกี่ยวกับฟีเจอร์ทั้งหมดที่รวมอยู่ได้ในInterop2025: การปรับปรุงแพลตฟอร์มเว็บอีกปี

โหมดการเขียนด้านข้าง

เราได้เห็นฟีเจอร์หนึ่งกลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานแล้ว นั่นคือค่า sideways-rlและsideways-lrสำหรับพร็อพเพอร์ตี้ CSS writing-mode หากคุณใช้โหมดการเขียนแนวตั้งเพื่อวัตถุประสงค์ในการจัดวางเท่านั้น ค่าด้านข้างน่าจะเป็นค่าที่ควรใช้

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

การวางตำแหน่ง Anchor

การวางตำแหน่ง Anchor เปิดตัวใน Chrome 125 ซึ่งช่วยให้คุณเชื่อมโยงตำแหน่งขององค์ประกอบกับ จุดยึดได้ เช่น เมื่อเปิดเคล็ดลับเครื่องมือด้วยปุ่ม

ตอนนี้ฟีเจอร์นี้รวมอยู่ใน Interop 2025 แล้ว ดังนั้นเราน่าจะได้เห็นฟีเจอร์นี้เข้าร่วม Baseline ในปีนี้

Core Web Vitals: LCP และ INP

LCP API

Event Timing API (สำหรับ INP)

Web Vitals ช่วยให้คุณวัดประสบการณ์ของเว็บไซต์และระบุโอกาสในการปรับปรุงได้ โครงการริเริ่ม Web Vitals มีเป้าหมายเพื่อลดความซับซ้อนของ ภาพรวม และช่วยให้เว็บไซต์มุ่งเน้นเมตริกที่มีความสำคัญที่สุด ซึ่งก็คือ Core Web Vitals

Interop 2025 มีเมตริก Largest Contentful Paint (LCP) และ Interaction to Next Paint (INP) โดยการใช้ LargestContentfulPaint API และ Event Timing API ในเบราว์เซอร์ต่างๆ

การเพิ่มประสิทธิภาพองค์ประกอบ <details>

องค์ประกอบ <details> เองก็เป็น Baseline Widely available อยู่แล้ว เราได้รวมไว้ใน Interop 2025 เนื่องจากมีฟีเจอร์หลายอย่างที่ทำให้วิดเจ็ตการเปิดเผยข้อมูลมีประโยชน์มากขึ้น<details>

องค์ประกอบ <details> มีองค์ประกอบ <summary> ซึ่งเป็นส่วนที่มองเห็นได้ในหน้าเว็บเมื่อองค์ประกอบ <details> ยุบอยู่ นอก<summary>คือเนื้อหาขององค์ประกอบ <details> ซึ่งจะซ่อนอยู่จนกว่าผู้ใช้จะคลิกสรุป

สิ่งหนึ่งที่กำลังทำให้ทำงานร่วมกันได้ในระหว่าง Interop 2025 คือการซ่อนเนื้อหาโดยใช้ content-visibility แทน display ซึ่งหมายความว่าหากไม่ได้ขยาย เนื้อหาจะไม่ได้รับการแสดงผลเลย

นอกจากนี้ ::markerPseudo-element ยังเป็นส่วนหนึ่งของงาน Interop 2025 ด้วย องค์ประกอบเสมือน ::marker ช่วยให้คุณจัดรูปแบบสามเหลี่ยมการเปิดเผยขององค์ประกอบ <summary> ได้

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

จากนั้นก็จะมีองค์ประกอบเสมือนอีกรายการหนึ่งคือ ::details-content

::details-content แสดงเนื้อหา ซึ่งเป็นส่วนขององค์ประกอบรายละเอียดที่ขยายและยุบได้ และให้คุณจัดรูปแบบได้

[open]::details-content {
  border: 5px dashed hotpink;
}

นอกจากนี้ ยังมีการปรับปรุงที่น่าสนใจ เช่น การขยายองค์ประกอบ <details> โดยอัตโนมัติด้วยรายการที่ตรงกันในฟีเจอร์ค้นหาในหน้า และการนำค่า until-found ของแอตทริบิวต์ hidden HTML ไปยัง Baseline Newly available ซึ่งจะซ่อนองค์ประกอบจนกว่าจะพบโดยใช้การค้นหาในหน้าของเบราว์เซอร์ หรือมีการไปยังองค์ประกอบนั้นโดยตรงด้วยการติดตามส่วน URL

CSS @scope

@scope กฎ CSS ช่วยให้คุณจำกัดการเข้าถึงของตัวเลือกได้ การตั้งค่า รูทขอบเขตด้วย @scope จะทำให้กฎสไตล์ที่ซ้อนอยู่ภายในกฎ @ มีผล กับ DOM ทรีนั้นเท่านั้น

เช่น หากต้องการกำหนดเป้าหมายเฉพาะองค์ประกอบ <img> ภายในองค์ประกอบที่มีคลาส .card .card จะกลายเป็นรูทการกำหนดขอบเขต

@scope (.card) {
    img {
        border-color: green;
    }
}

ดูข้อมูลเพิ่มเติมได้ที่จำกัดขอบเขตของตัวเลือกด้วยกฎ @scope ของ CSS

scrollend

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

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend เหตุการณ์จะช่วยให้เบราว์เซอร์ทำการประเมินที่ซับซ้อนทั้งหมดนี้ให้คุณ

document.onscrollend = event => {…}

ดูตัวอย่างเพิ่มเติมได้ใน Scrollend ซึ่งเป็นเหตุการณ์ JavaScript ใหม่

การเปลี่ยนมุมมองเอกสารเดียวกัน

สุดท้ายแต่ไม่ท้ายสุด การเปลี่ยนฉากเป็นส่วนหนึ่งของ Interop 2025 งานนี้เกี่ยวข้องกับการเปลี่ยนมุมมองในเอกสารเดียวกัน ดังนั้นจึงต้องใช้การเปลี่ยนมุมมองสำหรับแอปหน้าเดียวและ คลาสการเปลี่ยนมุมมองด้วย

ติดตามแดชบอร์ด Interop 2025 เพื่อดูความคืบหน้าของโปรเจ็กต์ตลอดทั้งปี

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

เราเพิ่งเริ่มดำเนินการ

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

โปรดติดตาม web.dev เพราะเราจะประกาศเกี่ยวกับเครื่องมือใหม่ๆ พร้อมบทแนะนำที่จะช่วยให้คุณใช้ประโยชน์จากทุกสิ่งที่เว็บมีให้ได้อย่างเต็มที่