<div class="key-takeaways"><ul><li>ผู้พิพากษา Amit Mehta ปฏิเสธข้อเสนอของกระทรวงยุติธรรมสหรัฐในการแยกกิจการ Chrome และ Android ของ Google</li><li>Google ถูกสั่งให้ยุติข้อตกลงการติดตั้งเป็นค่าเริ่มต้นแบบผูกขาดและต้องแชร์ข้อมูลการค้นหากับคู่แข่ง</li><li>Google กำลังอยู่ระหว่างการยื่นอุทธรณ์คำสั่งดังกล่าว ขณะที่ผู้บริหารระดับสูงมองว่าคำตัดสินนี้เป็นชัยชนะ</li><li>คดีต่อต้านการผูกขาดของรัฐบาลมุ่งเป้าไปที่กลยุทธ์การทำสัญญาเอ็กซ์คลูซีฟกับผู้ผลิตอุปกรณ์และเครือข่ายมือถือ</li></ul></div><p>หลังจากคำตัดสินในปี 2024 เจ้าหน้าที่กระทรวงยุติธรรมสหรัฐได้เสนอแนวทางหลากหลายในการแบ่งแยกธุรกิจค้นหาของ Google ซึ่งรวมถึงการบังคับขายเบราว์เซอร์ Chrome และระบบปฏิบัติการ Android ออกไป</p><p>อย่างไรก็ตาม ในเดือนกันยายน 2025 ผู้พิพากษา Amit Mehta ซึ่งดูแลคดีดังกล่าวได้ปฏิเสธคำขอให้มีการแยกกิจการ โดยตัดสินให้ Google สามารถเก็บรักษาทั้ง Chrome และ Android ไว้ได้ตามเดิม</p><div class="ai-insight"><p>คำตัดสินในคดีนี้ถือเป็นหนึ่งในหมุดหมายสำคัญของการควบคุมการผูกการค้าในอุตสาหกรรมเทคโนโลยีสหรัฐ โดยแม้ Google จะรอดพ้นจากการถูกบังคับแยกส่วนธุรกิจครั้งใหญ่ แต่มาตรการบังคับให้เปิดเผยข้อมูลและยกเลิกสัญญาผูกขาดก็อาจส่งผลกระทบต่อส่วนแบ่งทางการตลาดในระยะยาวอย่างมีนัยสำคัญ</p></div><p>แม้จะรอดจากการแบ่งแยกบริษัท แต่ผู้พิพากษาได้มีคำสั่งให้บริษัทต้องยุติข้อตกลงการจัดวางค่าเริ่มต้นแบบเอ็กซ์คลูซีฟ และต้องแบ่งปันข้อมูลการค้นหาบางส่วนให้กับคู่แข่ง ซึ่งในปัจจุบันมาตรการเยียวยานี้กำลังอยู่ในขั้นตอนการยื่นอุทธรณ์จากทาง Google</p><p>Lee-Anne Mulholland รองประธานฝ่ายกิจการกฎระเบียบของ Google ได้กล่าวกับ TechCrunch ว่าบริษัทมีความยินดีเป็นอย่างยิ่งที่ศาลปฏิเสธข้อเสนอของกระทรวงยุติธรรมในการแยกเครื่องมือที่ช่วยให้ธุรกิจขนาดเล็กเข้าถึงลูกค้าใหม่และเติบโตได้</p><blockquote class="pull-quote"><p>“We’re very pleased the Court rejected the DOJ’s proposal to break apart tools that help small businesses reach new customers and grow.”</p><cite>Lee-Anne Mulholland</cite></blockquote><p>ระบบนิเวศโฆษณาออนไลน์มักขึ้นชื่อเรื่องความซับซ้อนและเข้าใจยากสำหรับผู้ที่ไม่คุ้นเคย โดยคดีด้านเทคโนโลยีโฆษณาของรัฐบาลส่วนใหญ่พุ่งเป้าไปที่ยุทธศาสตร์ของบริษัทในการผลักดันให้เสิร์ชเอนจินของตนกลายเป็นค่าเริ่มต้นบนอุปกรณ์ทั่วโลก</p><p>รัฐบาลสหรัฐให้เหตุผลว่า Google บรรลุเป้าหมายดังกล่าวผ่านการทำข้อตกลงเอ็กซ์คลูซีฟกับผู้ผลิตอุปกรณ์ ทำให้เสิร์ชเอนจินของตนกลายเป็นค่าเริ่มต้นในตลาดโทรศัพท์มือถือเป็นวงกว้าง</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/google_mtkpac6y_inline_1_544c4d4af2.jpg" alt="smartphone mobile phone screen close up" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>นอกจากนี้ Google ยังได้ทำข้อตกลงแบ่งปันรายได้กับผู้ให้บริการมือถือ โดยผู้ให้บริการจะได้รับส่วนแบ่งรายได้จากโฆษณาเพื่อแลกกับการคงสถานะให้ Google เป็นเสิร์ชเอนจินเริ่มต้น ซึ่งเป็นกลไกสำคัญที่ช่วยตอกย้ำความเป็นเจ้าตลาด</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=techcrunch.com&sz=64" alt="TechCrunch" class="source-logo" width="16" height="16" /> <a href="https://techcrunch.com/2026/09/02/google-spared-from-ad-business-breakup-but-judge-orders-changes-to-how-it-operates/" target="_blank" rel="noopener noreferrer">TechCrunch</a></p>

<div class="key-takeaways"><ul><li>Judge Amit Mehta rejected U.S. Justice Department proposals to break up Google's Chrome and Android.</li><li>Google was ordered to end exclusive default placement deals and share certain search data with competitors.</li><li>Google is currently appealing the remedies, while framing the outcome as a significant win.</li><li>The government's antitrust case focused on exclusive agreements with device makers and mobile carriers.</li></ul></div><p>Following the 2024 ruling, Justice Department officials suggested various ways Google’s search business could be broken up, including divesting its Chrome browser and Android operating system.</p><p>However, in September 2025, the judge overseeing the case, Amit Mehta, rejected those divestiture requests, ruling that Google could keep both Chrome and Android.</p><div class="ai-insight"><p>This ruling marks a critical milestone in antitrust enforcement within the tech sector. While avoiding a structural breakup, the mandatory operational remedies and data-sharing requirements could still reshape Google's competitive landscape in online search and advertising.</p></div><p>The judge did order the company to end exclusive default-placement deals and share certain search data with competitors, which are remedies that Google is currently appealing.</p><p>Unsurprisingly, Google framed the outcome as a win. Lee-Anne Mulholland, Google’s vice president for regulatory affairs, told TechCrunch in a statement regarding the decision.</p><blockquote class="pull-quote"><p>“We’re very pleased the Court rejected the DOJ’s proposal to break apart tools that help small businesses reach new customers and grow.”</p><cite>Lee-Anne Mulholland</cite></blockquote><p>The online advertising ecosystem is notoriously opaque and byzantine, making it difficult to grasp for most people unfamiliar with its technical complexities.</p><p>Much of the government’s ad-tech case against Google revolved around the company’s tactics to ensure that its search engine was the default engine in devices across the world.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/google_mtkpac6y_inline_1_544c4d4af2.jpg" alt="smartphone mobile phone screen close up" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>To achieve this, Google used exclusive agreements with device manufacturers and entered into revenue sharing agreements with mobile carriers to cement its market position.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=techcrunch.com&sz=64" alt="TechCrunch" class="source-logo" width="16" height="16" /> <a href="https://techcrunch.com/2026/09/02/google-spared-from-ad-business-breakup-but-judge-orders-changes-to-how-it-operates/" target="_blank" rel="noopener noreferrer">TechCrunch</a></p>

medium_ศาลสหรัฐสั่ง-google-ปรับการดำเนินงาน-เลี่ยงคำสั่งแยกบริษัท-mtkpac6y.jpg

small_ศาลสหรัฐสั่ง-google-ปรับการดำเนินงาน-เลี่ยงคำสั่งแยกบริษัท-mtkpac6y.jpg

thumbnail_ศาลสหรัฐสั่ง-google-ปรับการดำเนินงาน-เลี่ยงคำสั่งแยกบริษัท-mtkpac6y.jpg

ศาลสหรัฐสั่ง-google-ปรับการดำเนินงาน-เลี่ยงคำสั่งแยกบริษัท-mtkpac6y.jpg

ผู้พิพากษา Amit Mehta ปฏิเสธคำขอของกระทรวงยุติธรรมสหรัฐในการบังคับให้ Google ขาย Chrome และ Android แต่สั่งให้ยุติข้อตกลงตั้งค่าเริ่มต้นและการแชร์ข้อมูล

Judge Amit Mehta rejected DOJ requests to divest Chrome and Android, but ordered Google to end exclusive default deals and share search data.

ศาลสหรัฐสั่ง Google ปรับการดำเนินงาน เลี่ยงคำสั่งแยกบริษัท

Google avoids ad-business breakup, ordered to change operations

<div class="key-takeaways"><ul><li>animation-trigger หน่วงเวลาแอนิเมชันจนกว่าจะเกิดทริกเกอร์</li><li>ต่างจาก scroll-driven ตรงที่เป็นแบบสถานะเปิด-ปิด</li><li>ขอบเขตชื่อทริกเกอร์เป็นแบบโกลบอลและจำกัดได้ด้วย trigger-scope</li><li>ปัจจุบันรองรับบนเบราว์เซอร์ Chrome 145 ขึ้นไป</li></ul></div><p>พร็อพเพอร์ตี้ CSS animation-trigger ทำหน้าที่หน่วงเวลาการเริ่มเล่นแอนิเมชัน CSS จนกว่าจะเกิดทริกเกอร์เฉพาะเจาะจง โดยมันจะคอยฟังชื่อทริกเกอร์ที่กำหนดไว้และควบคุมการเล่นหรือหยุดพักของแอนิเมชันตามเหตุการณ์นั้น ข้อกำหนดนี้ถูกนิยามไว้ในสเปก Animation Triggers ซึ่งปัจจุบันยังอยู่ในสถานะ Editor's Drafts ทำให้รายละเอียดอาจมีการเปลี่ยนแปลงได้ในอนาคตก่อนที่จะกลายเป็น Candidate Recommendation อย่างเป็นทางการ</p><p>ในส่วนของขอบเขตชื่อทริกเกอร์ โดยค่าเริ่มต้นแล้วจะมีขอบเขตแบบโกลบอล หากมีหลายองค์ประกอบใช้ชื่อทริกเกอร์ซ้ำกัน องค์ประกอบที่อยู่ลำดับหลังสุดใน CSS cascade จะถูกเลือกใช้งาน แต่เราก็สามารถจำกัดขอบเขตของทริกเกอร์ให้แคบลงเฉพาะในส่วน DOM subtree ที่ต้องการได้ด้วยพร็อพเพอร์ตี้ trigger-scope</p><div class="ai-insight"><p>การทำความเข้าใจความแตกต่างระหว่าง scroll-triggered animations และ scroll-driven animations ถือเป็นเรื่องสำคัญ เนื่องจากแบบแรกจะทำงานแบบมีสถานะสองสถานะ (Binary state) เช่น เล่น หยุด หรือรีเซ็ต เมื่อเงื่อนไขในระยะที่กำหนดเป็นจริง แอนิเมชันจะเล่นต่อไปตามปกติโดยไม่ผูกติดกับระยะการเลื่อนหน้าจออีก ต่างจากแบบหลังที่แอนิเมชันจะเดินหน้าหรือถอยหลังตามสัดส่วนการเลื่อนหน้าจอแบบต่อเนื่อง</p></div><p>การใช้งานจริงมักจะต้องตั้งค่า timeline trigger ควบคู่กันไปก่อน เพื่อควบคุมว่าแอนิเมชันจะเริ่มต้นเมื่อใดตามตำแหน่งขององค์ประกอบภายในไทม์ไลน์ เช่น ตำแหน่งการเลื่อนหน้าจอหรือมุมมองวิวพอร์ต โดยมันจะทำงานเมื่อองค์ประกอบนั้นเข้าสู่ช่วงระยะการทำงานที่กำหนดไว้ (Activation range) นอกจากนี้ ทริกเกอร์และแอนิเมชันไม่จำเป็นต้องอยู่บนองค์ประกอบเดียวกัน เราสามารถกำหนด timeline-trigger ไว้ที่องค์ประกอบแม่ แล้วนำ animation-trigger ไปใช้กับองค์ประกอบลูกหลายตัวพร้อมกันเพื่อให้ทั้งหมดเคลื่อนไหวพร้อมกันเมื่อองค์ประกอบแม่เลื่อนเข้ามาในมุมมอง</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/css_animation_trigger_mtacn3e4_inline_1_e528658453.jpg" alt="code snippet syntax highlighting web design" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>ตัวอย่างการใช้งานเบื้องต้นสำหรับการทำ text reveal แอนิเมชัน เมื่อผู้ใช้เลื่อนหน้าจอผ่านจุดทริกเกอร์ ตัวแอนิเมชันจะเริ่มทำงานและทำให้ข้อความค่อยๆ ปรากฏขึ้น โดยกำหนด timeline trigger บนองค์ประกอบทริกเกอร์ จากนั้นจึงใส่ animation-trigger พร้อมกับแอนิเมชันหลักให้กับข้อความที่ต้องการแสดงผล</p><div class="stat-row"><div class="stat-item"><span class="stat-number">145+</span><span class="stat-label">Chrome Version ที่รองรับ</span></div></div><p>สำหรับสถานะการรองรับบนเว็บไซต์เบราว์เซอร์ ในขณะที่เขียนบทนี้นั้น พร็อพเพอร์ตี้ animation-trigger รองรับการใช้งานบน Google Chrome เวอร์ชัน 145 ขึ้นไปเท่านั้น นักพัฒนาที่สนใจสามารถศึกษาเพิ่มเติมจากแหล่งข้อมูลอย่างเป็นทางการของทีมพัฒนา Chrome และบทความเกี่ยวกับ CSS Animation Triggers</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/almanac/properties/a/animation-trigger/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

<div class="key-takeaways"><ul><li>animation-trigger delays animations until a specific trigger occurs</li><li>Unlike scroll-driven animations, it operates on a binary state</li><li>Trigger names have global scope and can be scoped via trigger-scope</li><li>Browser support is currently available in Chrome version 145 and above</li></ul></div><p>The CSS animation-trigger property delays the start of a CSS animation until a specific trigger occurs, listening for a named trigger to control playback. This property is defined within the Animation Triggers specification, which is currently in Editor's Drafts, meaning details might change before it reaches official Candidate Recommendation status.</p><p>By default, trigger names operate with a global scope. If multiple elements share the same trigger name, the element appearing later in the cascade takes precedence. Developers can restrict this scope to a specific DOM subtree using the trigger-scope property.</p><div class="ai-insight"><p>Understanding the distinction between scroll-triggered and scroll-driven animations is crucial. Scroll-triggered animations are state-based rather than continuous; once a binary condition is met, such as entering a defined range, the trigger fires an action like play, pause, or reset, after which the animation runs independently of scroll progress.</p></div><p>To utilize animation-trigger effectively, developers typically set up a timeline trigger first to control animation initiation based on an element's position within a timeline, activating when it enters a designated range. Importantly, triggers and animations do not need to reside on the same element; a timeline-trigger on a parent element can orchestrate animation-trigger effects across multiple child elements simultaneously.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/css_animation_trigger_mtacn3e4_inline_1_e528658453.jpg" alt="code snippet syntax highlighting web design" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>A simple text reveal animation can be created by setting a timeline trigger point on an element. Once scrolled past, the animation executes and fades the text in by applying the timeline trigger to the trigger element and pairing animation-trigger with the target text element.</p><div class="stat-row"><div class="stat-item"><span class="stat-number">145+</span><span class="stat-label">Supported Chrome Version</span></div></div><p>Regarding browser compatibility at the time of writing, the animation-trigger property is supported exclusively in Google Chrome version 145 and newer. Developers can dive deeper into related documentation provided by Chrome for developers and community articles.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/almanac/properties/a/animation-trigger/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

medium_css-animation-trigger-พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน-mtacn3e4.jpg

small_css-animation-trigger-พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน-mtacn3e4.jpg

thumbnail_css-animation-trigger-พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน-mtacn3e4.jpg

css-animation-trigger-พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน-mtacn3e4.jpg

ทำความรู้จัก animation-trigger พร็อพเพอร์ตี้ CSS ใหม่จากข้อกำหนด Animation Triggers ที่ช่วยให้แอนิเมชันเริ่มเล่นเมื่อเกิดทริกเกอร์ รองรับแล้วใน Chrome 145+

Explore the new CSS animation-trigger property from the Animation Triggers spec, enabling scroll-based triggers. Currently supported in Chrome 145+.

CSS animation-trigger พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน

CSS animation-trigger Property Controls Animations

<div class="key-takeaways"><ul><li>กูเกิลโครมนำข้อมูลรับรองเซสชันผูกกับอุปกรณ์มาใช้ป้องกัน</li><li>ช่วยสกัดกั้นการยึดครองบัญชีผู้ใช้ที่กำลังระบาดหนัก</li><li>ยกระดับความปลอดภัยของผู้ใช้งานให้เหนือกว่าเดิม</li></ul></div><p>ในปัจจุบันภัยคุกคามจากการยึดบัญชีผู้ใช้ออนไลน์กำลังกลายเป็นปัญหาที่พบเห็นได้บ่อยและทวีความรุนแรงมากขึ้นเรื่อยๆ ซึ่งสร้างความกังวลให้กับทั้งผู้พัฒนาแพลตฟอร์มและตัวผู้ใช้งานเองเป็นอย่างมาก ล่าสุดทางเว็บเบราว์เซอร์กูเกิลโครมจึงได้ตัดสินใจนำเอาเทคโนโลยีการป้องกันรูปแบบใหม่เข้ามาปรับใช้ เพื่อรับมือกับปัญหานี้โดยเฉพาะและมอบความปลอดภัยที่แน่นหนายิ่งขึ้น</p><p>เทคโนโลยีดังกล่าวคือการใช้ข้อมูลรับรองเซสชันที่ผูกติดอยู่กับตัวอุปกรณ์โดยเฉพาะ (Device-bound session credentials) ซึ่งทำหน้าที่ขัดขวางรูปแบบการโจมตีที่มุ่งขโมยข้อมูลเซสชันของผู้ใช้งานไปใช้ประโยชน์ในทางมิชอบ วิธีการนี้ช่วยปิดช่องโหว่สำคัญที่แฮกเกอร์มักใช้ในการเข้าถึงบัญชีส่วนบุคคล แม้ว่าจะมีการขโมยรหัสผ่านไปได้ก็ตาม</p><div class="ai-insight"><p>การใช้ข้อมูลรับรองเซสชันที่ผูกกับอุปกรณ์ถือเป็นก้าวสำคัญในด้านความปลอดภัยทางไซเบอร์ เนื่องจากคุกกี้เซสชันแบบเดิมมักตกเป็นเป้าหมายของการถูกขโมยและนำไปคัดลอกใช้งานบนเครื่องอื่น การผูกข้อมูลเหล่านี้เข้ากับฮาร์ดแวร์หรือกุญแจเข้ารหัสเฉพาะของอุปกรณ์นั้นๆ จะช่วยให้มั่นใจได้ว่ามีเพียงเจ้าของเครื่องตัวจริงเท่านั้นที่สามารถใช้งานเซสชันนั้นได้</p></div><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/msp9pgks_inline_1_ae65061819.jpg" alt="web browser security software" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=feeds.arstechnica.com&sz=64" alt="Ars Technica" class="source-logo" width="16" height="16" /> <a href="https://arstechnica.com/security/2026/08/chrome-adopts-what-may-be-the-best-protection-yet-against-account-takeovers/" target="_blank" rel="noopener noreferrer">Ars Technica</a></p>

<div class="key-takeaways"><ul><li>Google Chrome implements device-bound session credentials</li><li>Designed to thwart increasingly common account takeovers</li><li>Provides advanced security for user accounts</li></ul></div><p>Online account takeovers have become an increasingly frequent and severe threat across the digital landscape, causing major concerns for both platform developers and everyday users. To combat this growing issue, the Google Chrome web browser has decided to integrate a cutting-edge protection mechanism tailored specifically to neutralize these attacks.</p><p>The newly adopted technology relies on device-bound session credentials, which effectively stop a prevalent form of account compromise where attackers attempt to hijack active user sessions. This approach successfully closes critical security gaps that hackers typically exploit to gain unauthorized access to personal accounts, even if they manage to bypass traditional password barriers.</p><div class="ai-insight"><p>Implementing device-bound session credentials represents a major milestone in web security. Traditional session cookies are frequently targeted for theft and can be replayed on unauthorized machines. By cryptographically binding these credentials to a specific device's hardware, platforms can ensure that active sessions cannot be stolen and used elsewhere.</p></div><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/msp9pgks_inline_1_ae65061819.jpg" alt="web browser security software" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=feeds.arstechnica.com&sz=64" alt="Ars Technica" class="source-logo" width="16" height="16" /> <a href="https://arstechnica.com/security/2026/08/chrome-adopts-what-may-be-the-best-protection-yet-against-account-takeovers/" target="_blank" rel="noopener noreferrer">Ars Technica</a></p>

medium_-msp9pgks.jpg

small_-msp9pgks.jpg

thumbnail_-msp9pgks.jpg

-msp9pgks.jpg

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

Google Chrome introduces device-bound session credentials to thwart the rising threat of account takeovers.

โครมนำระบบป้องกันการยึดบัญชีที่ดีที่สุดมาใช้งาน

Chrome adopts what may be the best protection yet against account takeovers

<div class="key-takeaways"><ul><li>Firefox 154 เตรียมรองรับ sibling-index() สำหรับทำแอนิเมชันในวันที่ 18 สิงหาคม 2026</li><li>Ahmad Shadeed เผยวิธีเขียนโค้ดทำผังแข่งขันน็อคเอาท์ด้วย CSS ล้วน</li><li>Adam Argyle แนะนำกรณีใช้งานจริงของคีย์เวิร์ด infinity ในฟังก์ชัน calc()</li><li>Chris Coyier สาธิตการใช้งาน container scroll state queries เพื่อตรวจสอบสถานะ stuck</li></ul></div><p>วงการพัฒนาเว็บไซต์กลับมาคึกคักอีกครั้งกับบทความสรุปประเด็นน่าสนใจล่าสุดจาก CSS-Tricks ที่รวบรวมเทคนิค ลูกเล่น และฟีเจอร์ใหม่ๆ มาให้เหล่านักพัฒนาได้อัปเดตกันแบบจุใจ เริ่มต้นกันที่เทคนิคการทำแอนิเมชันสุดล้ำโดยอาศัยฟังก์ชัน sibling-index() ซึ่งต่อยอดมาจากซีรีส์บทความ In-N-Out Animations ของ Chris Coyier โดยทาง Temani Afif ได้มาสาธิตวิธีใช้งานจริง ซึ่งเบราว์เซอร์ Firefox 154 มีกำหนดจะปล่อยฟีเจอร์นี้ในวันที่ 18 สิงหาคม 2026 ส่งผลให้ฟีเจอร์นี้ขยับสถานะเป็น Baseline: Newly Available อย่างเป็นทางการ</p><p>สำหรับใครที่ยังอาลัยอาวรณ์มหกรรมฟุตบอลโลก 2026 ที่เพิ่งปิดฉากลงไปพร้อมกับความมันส์สะใจ Ahmad Shadeed ได้นำเสนอวิธีสร้างผังการแข่งขันรอบน็อคเอาท์ (Knockout Bracket) ขึ้นมาใหม่ด้วยการใช้ CSS ล้วนๆ ซึ่งถือเป็นบทความที่อ่านสนุกและเต็มไปด้วยไอเดียสร้างสรรค์ที่เหล่านักพัฒนาไม่ควรพลาดด้วยประการทั้งปวง</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/css_sibling_index_infinity_container_stuck_queries_ms977fsf_inline_1_60d522ede4.jpg" alt="css code snippet preview" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><div class="ai-insight"><p>การใช้งานฟังก์ชันเชิงคณิตศาสตร์และตัวแปรขั้นสูงใน CSS เช่น ฟังก์ชัน calc() ที่รองรับคีย์เวิร์ด infinity ช่วยให้นักพัฒนาสามารถจัดการกับเลย์เอาต์ซับซ้อนและการคำนวณค่าขีดจำกัดได้อย่างยืดหยุ่น โดยไม่ต้องพึ่งพา JavaScript มาช่วยคำนวณเหมือนในอดีต สะท้อนให้เห็นถึงวิวัฒนาการของ CSS ที่ทรงพลังเทียบเท่าภาษาสะสมคำสั่งทั่วไป</p></div><p>ในส่วนของลูกเล่นเชิงตัวเลข Adam Argyle ได้ออกมาเขียนอธิบายถึงกรณีการใช้งานคีย์เวิร์ด infinity ภายในฟังก์ชัน calc() ซึ่งรวมถึงค่าติดลบอย่าง -infinity ว่าสามารถนำไปประยุกต์ใช้กับสถานการณ์ใดได้บ้าง ถือเป็นอีกหนึ่งความรู้รอบตัวที่น่าสนใจสำหรับผู้ที่ต้องการรีดประสิทธิภาพการเขียนโค้ดออกมาให้ได้มากที่สุด นอกจากนี้ Johannes Bechberger ยังได้มาแนะนำ 3 วิธีในการทำแอนิเมชันให้กับข้อความลายมือ (Hand-drawn text) ซึ่งช่วยลดความน่ากลัวของการใช้งาน SVG ลงไปได้เยอะเพราะมีคอมเมนต์อธิบายโค้ดที่เข้าใจง่าย</p><p>ทางด้าน Chris Coyier ได้หยิบยกเรื่อง container 'stuck' queries มาแนะนำ โดยเป็นการใช้งาน query เพื่อตรวจสอบว่าธาตุ (Element) กำลังอยู่ในสถานะถูกตรึง (Stuck) หรือไม่ ผ่านการใช้งาน @container scroll-state(stuck: &lt;keyword>) แม้ว่าในขณะนี้ทั้ง Safari และ Firefox จะยังไม่รองรับก็ตาม</p><p>ปิดท้ายด้วยการอัปเดตความเคลื่อนไหวของเบราว์เซอร์ โดย Firefox 153 ได้ปรับปรุงความสามารถในการทำงานร่วมกัน (Interoperability) พร้อมทั้งรองรับ Picture-in-Picture API ในสถานะ Baseline แล้ว ในขณะที่ Chrome 151 มาพร้อมกับการรองรับ &lt;usermedia&gt; และการปรับปรุงอื่นๆ อีกมากมาย โดยมีรายงานตารางพัฒนาของ Chrome ที่วางแผนยาวไกลไปจนถึง 14 ปีข้างหน้าและหยุดลงที่เวอร์ชัน Chrome 499 พอดี</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/whats-important-16/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

<div class="key-takeaways"><ul><li>Firefox 154 will ship sibling-index() for animations on August 18, 2026</li><li>Ahmad Shadeed demonstrates how to code a World Cup knockout bracket using CSS</li><li>Adam Argyle explores practical use cases for the infinity keyword inside calc()</li><li>Chris Coyier introduces container scroll state queries to check stuck elements</li></ul></div><p>The web development community gets a fresh batch of modern techniques and exciting updates courtesy of the latest CSS-Tricks roundup. Kicking things off, Temani Afif showcased how to leverage sibling-index() for creative animations—building upon Chris Coyier’s In-N-Out Animations series. Firefox 154 is scheduled to ship this feature on August 18, 2026, pushing it into Baseline: Newly Available status.</p><p>For developers suffering from post-World Cup blues following the conclusion of the 2026 FIFA World Cup, Ahmad Shadeed published a fantastic guide on building a complete tournament knockout bracket using pure CSS. It is an exceptionally fun read packed with clever implementation details that you definitely should check out.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/css_sibling_index_infinity_container_stuck_queries_ms977fsf_inline_1_60d522ede4.jpg" alt="css code snippet preview" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><div class="ai-insight"><p>Integrating advanced mathematical keywords like infinity and negative infinity (-infinity) inside CSS calc() functions allows developers to handle extreme boundary conditions and complex layout constraints natively. This evolutionary step minimizes the need for JavaScript workarounds, pushing CSS further into a truly programmable styling language.</p><p>Moving on to numerical tricks, Adam Argyle penned an insightful deep dive explaining various real-world use cases for the infinity keyword within calc() functions, including negative infinity. Meanwhile, Johannes Bechberger shared three distinct approaches to animating hand-drawn text, cutting straight through the intimidation factor of SVG by providing crystal-clear code comments.</p><p>In other layout news, Chris Coyier introduced container 'stuck' queries, demonstrating how to query whether an element is currently stuck using @container scroll-state(stuck: &lt;keyword>). However, developer adoption will have to wait as neither Safari nor Firefox supports this emerging container query yet.</p><p>The article wrapped up with notable web platform updates, highlighting that Firefox 153 features several interoperability improvements and brings the Picture-in-Picture API to Baseline status. Concurrently, Chrome 151 added support for &lt;usermedia&gt; alongside interoperability enhancements, accompanied by the humorous observation that Chrome's roadmap appears mapped out for the next 14 years right up to Chrome 499.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/whats-important-16/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

medium_article-1062.jpg

small_article-1062.jpg

thumbnail_article-1062.jpg

article-1062.jpg

สรุปประเด็นเด่นจากวงการเว็บเดเวลอปเมนต์รอบล่าสุด ทั้งแอนิเมชันด้วย sibling-index() ใน Firefox 154, การสร้างผังการแข่งขันฟุตบอลด้วย CSS และอัปเดตเบราว์เซอร์ล่าสุด

A roundup of the latest web development highlights featuring sibling-index() animations in Firefox 154, CSS knockout brackets, and browser updates.

เจาะลึกฟีเจอร์ CSS ใหม่: sibling-index(), คีย์เวิร์ด infinity และ Container Stuck Queries

What’s !important: sibling-index() Animations, Infinity Keyword, and Stuck Queries

<div class="key-takeaways"><ul><li>Google พัฒนาอัปเดต Chrome ไม่ต้องรีสตาร์ทเบราว์เซอร์</li><li>ใช้ AI ช่วยตรวจจับและแก้ไขบัณทวีคูณในเวอร์ชันล่าสุด</li><li>เตรียมปรับรอบปล่อยอัปเดตเร็วขึ้นและเพิ่มความถี่ความปลอดภัย</li></ul></div><p>การอัปเดตโปรแกรมเว็บเบราว์เซอร์ในปัจจุบันมักจะมาพร้อมกับการบังคับปิดและเปิดโปรแกรมใหม่ ซึ่งบางครั้งก็สร้างความหงุดหงิดให้กับผู้ใช้งานไม่น้อย ล่าสุดทาง Google กำลังหาแนวทางใหม่ในการจัดการเรื่องนี้ เพื่อลดความยุ่งยากและผลกระทบต่อการใช้งานของผู้ใช้ให้น้อยที่สุดเท่าที่จะทำได้</p><p>ในบทความที่เผยแพร่เมื่อวันพฤหัสบดี ทาง Google ได้อธิบายถึงแนวทางการแก้ไขข้อบกพร่องในยุคที่ปัญญาประดิษฐ์หรือ AI เข้ามามีบทบาทสำคัญ โดยระบุว่าบริษัทกำลังลงทุนกับการพัฒนา "dynamic patching" หรือการแพץแก้ไขระบบแบบไดนามิก ซึ่งจะเข้ามาช่วยตัดความจำเป็นในการรีสตาร์ทเบราว์เซอร์แบบเต็มรูปแบบทิ้งไป</p><div class="stat-row"><div class="stat-item"><span class="stat-number">1,072</span><span class="stat-label">จำนวนบั๊กที่แก้ไขใน Chrome 149 และ 150</span></div></div><p>ทาง Google เปิดเผยว่าเครื่องมือรักษาความปลอดภัยที่ขับเคลื่อนด้วย AI สามารถช่วยบริษัทค้นหาและแก้ไขข้อบกพร่องได้เป็นจำนวนมาก โดยยกตัวอย่างว่า Chrome เวอร์ชัน 149 และ 150 นั้นมีการแก้ไขบั๊กมากถึง 1,072 รายการ ซึ่งตัวเลขนี้สูงกว่าจำนวนแพทช์รวมกันจากเวอร์ชันหลัก 23 เวอร์ชันก่อนหน้านี้เสียอีก</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/google_chrome_ms7rhayt_inline_1_6cc87873c7.jpg" alt="Google Chrome logo browser interface" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><div class="ai-insight"><p>การเพิ่มขึ้นอย่างก้าวกระโดดของการตรวจพบบั๊กผ่าน AI สะท้อนให้เห็นว่าบริษัทเทคโนโลยีต้องเร่งปรับตัว เพราะแฮกเกอร์ก็ใช้ AI เป็นเครื่องมือในการโจมตีที่รวดเร็วเช่นกัน การที่ Google ปรับรอบการปล่อยอัปเดตให้เร็วขึ้นจึงเป็นกลยุทธ์สำคัญในการปิดช่องโหว่ประเภท N-day attacks ที่แฮกเกอร์มักฉวยโอกาสโจมตีก่อนที่ผู้ใช้จะทันได้ติดตั้งแพทช์</p></div><p>นอกจากระบบ dynamic patching แล้ว Google ยังพยายามมองหาช่วงเวลาที่เหมาะสมในการรีสตาร์ทเบราว์เซอร์โดยอัตโนมัติ โดยรับประกันว่าจะไม่มีผลกระทบต่อเซสชันการใช้งานของผู้ใช้ ฟีเจอร์ลักษณะนี้ถูกนำมาใช้แล้วใน Chrome 150 บนระบบปฏิบัติการ macOS ซึ่งใช้ประโยชน์จากสถานะที่แอปพลิเคชันยังคงทำงานอยู่เบื้องหลังแม้หน้าต่างทั้งหมดจะถูกปิดลงไปแล้ว</p><blockquote class="pull-quote"><p>"วิสัยทัศน์ระยะยาวของเราคือเบราว์เซอร์ที่ทันสมัยอยู่เสมอ ซึ่งได้รับการแพทช์อย่างต่อเนื่องและไดนามิก และรีสตาร์ทโดยอัตโนมัติในช่วงเวลาที่เหมาะสมโดยมีการรบกวนน้อยที่สุด"</p><cite>Google</cite></blockquote><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=www.theverge.com&sz=64" alt="The Verge" class="source-logo" width="16" height="16" /> <a href="https://www.theverge.com/tech/973174/google-chrome-update-no-restart" target="_blank" rel="noopener noreferrer">The Verge</a></p>

<div class="key-takeaways"><ul><li>Google is working on Chrome updates without browser restarts</li><li>AI tools are helping find and fix thousands of bugs</li><li>Google plans faster release cycles and more frequent security patches</li></ul></div><p>Updating web browsers often requires closing and relaunching the application, which can occasionally disrupt a user's workflow. To address this annoyance, Google is actively exploring new methods to make software updates much less intrusive for everyday users.</p><p>In a post published on Thursday, Google outlined its approach to handling bug fixes in the age of artificial intelligence. The company stated that it is investing in "dynamic patching," a method designed to completely eliminate the need for a full browser restart when updates are applied.</p><div class="stat-row"><div class="stat-item"><span class="stat-number">1,072</span><span class="stat-label">Bug fixes in Chrome 149 and 150</span></div></div><p>According to Google, AI-powered security tools have already assisted the company in uncovering and resolving dozens of issues. For instance, Chrome versions 149 and 150 combined for a staggering 1,072 bug fixes, surpassing the total number of patches from the past 23 major releases combined.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/google_chrome_ms7rhayt_inline_1_6cc87873c7.jpg" alt="Google Chrome logo browser interface" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><div class="ai-insight"><p>The explosive growth in bug detection driven by AI highlights how tech giants must adapt as malicious actors increasingly leverage automated tools for rapid exploits. Google's shift toward faster release cycles is a crucial defensive strategy against "N-day" attacks, which happen when hackers exploit newly released vulnerabilities before users can download patches.</p></div><p>Along with dynamic patching, Google is searching for optimal moments to automatically restart the browser while guaranteeing a seamless session restore. A version of this capability has already been rolled out in Chrome 150 on macOS, taking advantage of states where applications continue running in the background after all windows are closed.</p><blockquote class="pull-quote"><p>"Our long-term vision is a browser that is always up-to-date — continuously and dynamically patched, and automatically restarted during opportune periods of minimal disruption."</p><cite>Google</cite></blockquote><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=www.theverge.com&sz=64" alt="The Verge" class="source-logo" width="16" height="16" /> <a href="https://www.theverge.com/tech/973174/google-chrome-update-no-restart" target="_blank" rel="noopener noreferrer">The Verge</a></p>

medium_google-chrome-ms7rhayt.jpg

small_google-chrome-ms7rhayt.jpg

thumbnail_google-chrome-ms7rhayt.jpg

google-chrome-ms7rhayt.jpg

Google เตรียมใช้เทคโนโลยี dynamic patching และระบบรีสตาร์ทอัตโนมัติ เพื่อลดความน่ารำคาญจากการอัปเดต Chrome พร้อมรับมือภัยคุกคามยุค AI

Google is developing dynamic patching and automatic restart features to make Chrome updates less disruptive and counter AI-powered attacks.

Google กำลังพัฒนาอัปเดต Chrome แบบไม่ต้องรีสตาร์ทเบราว์เซอร์

Google is working on Chrome updates that don’t require restarts

Inewgen

Inewgen

#Chrome

ศาลสหรัฐสั่ง Google ปรับการดำเนินงาน เลี่ยงคำสั่งแยกบริษัท

Inewgen

CSS animation-trigger พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน

Inewgen

โครมนำระบบป้องกันการยึดบัญชีที่ดีที่สุดมาใช้งาน

Inewgen

เจาะลึกฟีเจอร์ CSS ใหม่: sibling-index(), คีย์เวิร์ด infinity และ Container Stuck Queries

Inewgen

Google กำลังพัฒนาอัปเดต Chrome แบบไม่ต้องรีสตาร์ทเบราว์เซอร์

Inewgen