Microsoft Edge ใช้ Chromium: สิ่งที่นักออกแบบเว็บไซต์ต้องรู้

Internet Explorer ของ Microsoft เป็นหนึ่งในมส์ที่ใหญ่ที่สุดบนอินเทอร์เน็ต นอกจากนี้ยังเป็นความหายนะของนักออกแบบเว็บไซต์หลายคนเนื่องจากไม่รองรับเทคโนโลยีที่เพิ่งเปิดตัวใหม่ เมื่อ Microsoft รีแบรนด์ IE เป็น Microsoft Edge มีความหวังว่าวันเหล่านั้นจะสิ้นสุดลง ว่าเบราว์เซอร์ Windows เริ่มต้นจะใช้เทคโนโลยีที่ทันสมัยได้อย่างง่ายดาย และเว็บจะมีแพลตฟอร์มมาตรฐานที่เหมาะสม ที่ไม่ได้เกิดขึ้น อย่างไรก็ตาม ในช่วงปลายปี 2018 MS ได้ประกาศว่าจะมีการเปลี่ยนแปลง: Edge ได้นำเครื่องยนต์ Chromium มาใช้เป็นพื้นฐาน

Microsoft Edge Chromium? เรื่องใหญ่คืออะไร?

ในการเขียนนี้ คุณสามารถดาวน์โหลดบิลด์ตัวอย่าง Edge ที่มีฐาน Chromium ได้ มันเป็นฐานสำหรับนักพัฒนาและไม่ได้มีไว้สำหรับการขับรถทุกวันในฐานะเบราว์เซอร์ แต่สำหรับพวกคุณที่อยากกำจัด Edge ที่มีอยู่ออกไป คุณก็ทำได้ มันเป็นกระดูกที่เปลือยเปล่ามากในระยะแรกแม้ว่า ในขณะที่ 2019 ดำเนินไป เบราว์เซอร์ OEM จะได้รับการอัปเดตตามปกติเพื่อรวม Chromium

ที่ทั้งหมดที่ดี แต่อะไรคือเรื่องใหญ่คุณถาม? คำตอบสำหรับเรื่องนี้มีสามเท่า

1. Microsoft เปิดรับโอเพ่นซอร์ส

เมื่อเร็ว ๆ นี้ เราได้เห็นข้อบ่งชี้หลายประการของ Microsoft ที่ย้ายจากโมเดลที่เป็นกรรมสิทธิ์ของอดีตไปสู่ขอบเขตของซอฟต์แวร์โอเพนซอร์ซ พวกเขาเคลื่อนไหวไปในทิศทางนี้ตั้งแต่ซื้อ GitHub และเริ่มปรับปรุงตัวแก้ไขโค้ด Atom และอาจสำคัญที่สุดด้วยการเปิดตัว Visual Studio Code ซึ่งอาจเป็นโปรแกรมแก้ไขที่ได้รับความนิยมมากที่สุดในหมู่นักพัฒนาในทุกวันนี้ นอกจากนี้ Visual Studio IDE ยังเปิดให้ดาวน์โหลดฟรี หาก VS Code มีประสิทธิภาพไม่เพียงพอสำหรับคุณ

การเพิ่ม Edge ลงในเวทีโอเพนซอร์ซจะจบลงด้วยผลิตภัณฑ์ที่แข็งแกร่งสำหรับผู้บริโภคเท่านั้น Microsoft ใส่ไว้เป็นอย่างดีในคำสั่งนี้

เรายังได้เริ่มให้การสนับสนุน Chromium ในด้านต่างๆ เช่น การช่วยการเข้าถึง การสัมผัส ARM64 และอื่นๆ แผนของเราคือทำงานใน Chromium ต่อไป แทนที่จะสร้างโครงการคู่ขนาน เรากำลังทำงานร่วมกับทีมงานของ Google โดยตรง และหวังว่าจะได้ทำงานร่วมกับชุมชนโอเพ่นซอร์สมากยิ่งขึ้น

เป็นเรื่องดีที่ได้ยินว่า Microsoft ทำงานร่วมกับ Google ใน Chromium แทนที่จะฟอร์แมตเพื่อจุดประสงค์ของตัวเอง และเมื่อโครงการก้าวไปข้างหน้า Chromium และการออกแบบเว็บโดยรวมก็จะแข็งแกร่งและเปิดกว้างมากขึ้น

2. การกระจายตัวน้อยลง คุณสมบัติเพิ่มเติม

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

สิ่งเหล่านี้เป็นสาเหตุว่าทำไมเราจึงได้รับการอัปเกรด Microsoft Edge Chromium พวกเขาระบุอย่างชัดเจนว่าเป้าหมายของพวกเขาคือ “การสร้างความเข้ากันได้ของเว็บที่ดีขึ้นสำหรับลูกค้าของเรา และการกระจายตัวของเว็บน้อยลงสำหรับนักพัฒนาเว็บทุกคน”

การลดการกระจายตัวของข้อมูลนั้นหมายถึงการใช้งานเว็บที่สอดคล้องกันมากขึ้น นอกจากนี้ยังหมายความว่าผู้ใช้สามารถ (หวังว่า) ใช้ส่วนขยายและส่วนเสริมโดยไม่ต้องทำงานเพิ่มเติม (มาก) จากผู้พัฒนา

เรามั่นใจว่าพวกเขาจะเห็นความเข้ากันได้แบบเดียวกันในเบราว์เซอร์ Edge โดยไม่ต้องดำเนินการใดๆ เพิ่มเติม

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

3. นักออกแบบเว็บไซต์รับฟรี

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

ประเด็นสำคัญสำหรับนักออกแบบเว็บไซต์และนักพัฒนา

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

พื้นหลังผสมโหมด CSS Works

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

Edge เข้าใจรหัสสีฐานสิบหกด้วยความโปร่งใส (ในที่สุด)

ดังนั้น นี่จึงไม่ใช่ฟีเจอร์ใหม่ที่น่าทึ่งนัก เนื่องจากเป็นการปรับปรุงคุณภาพชีวิตโดยรวม และสำหรับบางคน เรื่องนี้อาจไม่สำคัญเลย คนเหล่านั้นเป็นคนที่ไม่สนใจที่จะเขียนสีเป็น rgba(255, 255, 255, .45) แทน #ffffff45 หากคุณ (เช่นเดียวกับหลายๆ คน) ชอบสีฐานสิบหก แสดงว่าคุณโชคดี ในที่สุด คุณจะสามารถเริ่มใช้สไตล์ที่คุณชอบและจัดระเบียบสไตล์ชีตของคุณให้เป็นระเบียบ

โดยพื้นฐานแล้ว คุณสามารถรวมความโปร่งใสในฐานสิบหกที่แสดงใน Edge ด้วยการเปลี่ยนแปลงนี้ (หมายเหตุ 45 ที่ส่วนท้ายของตัวอย่างด้านบน ซึ่งแสดงถึงความโปร่งใส 45%) ซึ่งหมายถึงไม่มี CSS แบบผสมและจับคู่อีกต่อไป ดังที่เราได้กล่าวไปแล้วว่าเป็นคุณลักษณะด้านคุณภาพชีวิต

การวางแนวข้อความและโหมดการเขียน CSS จะแสดงผล

เทคโนโลยี CSS ขั้นสูงไม่เคยเหมาะกับ Edge มาก่อน อันที่จริงแล้ว มันไม่ใช่แม้แต่ชุดที่อ่อนแอ มันไม่อยู่ในตู้เสื้อผ้าของ Edge เลย หากคุณเป็นนักพัฒนาประเภทที่ต้องการใช้ประโยชน์จาก CSS ขั้นสูงที่นอกเหนือไปจากสิ่งที่ผู้สร้างเพจอย่าง Divi สามารถทำได้ (และนั่นก็ไม่ใช่เรื่องมาก เป็นที่ยอมรับ) คุณรู้สึกหงุดหงิดกับ Microsoft Edge และ Internet Explorer อยู่เสมอ เพราะมันใช้ ไม่ได้ กับบางอย่าง นั่นคืออดีตที่ Chromium อยู่ภายใต้ประทุน และหนึ่งในเอฟเฟกต์ที่เราโปรดปราน (คือ ในทางเทคนิคแล้ว สองเอฟเฟกต์) คือ text-orientation/writing-mode

เราตั้งกระทู้ไปซักพักแล้วที่ด้านข้างและข้อความแนวตั้ง จนกว่าจะมีการอัปเดตนี้ โค้ดต่อไปนี้ (และเอฟเฟกต์ในโพสต์) ไม่สามารถแสดงใน Edge ได้

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}
 
.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}
 
.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

เราดีใจที่เอฟเฟกต์และเทคโนโลยีขั้นสูงเหล่านี้ไม่ถูกบล็อกโดย The Powers That Be อีกต่อไป

การนำเข้าบุ๊กมาร์กมาตรฐานและส่วนขยาย

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

นักออกแบบเว็บไซต์จำนวนมากใช้ส่วนขยายเพื่อทำให้ชีวิตของพวกเขาง่ายขึ้น อาจเป็นหยดสีเพื่อให้คุณสามารถคว้าสีที่สมบูรณ์แบบนั้นออกจากเว็บไซต์ (ซึ่งตอนนี้คุณสามารถใช้ใน Edge ได้เช่นกัน!) หรือไม้บรรทัดเพื่อให้ได้ขนาดที่เหมาะสมหรือตัวหยิบแบบอักษร บางทีคุณอาจมีทุกอย่างในรายการนี้ติดตั้งอยู่ และคุณไม่ต้องการที่จะออกจาก Chrome เพียงเพราะสิ่งเหล่านี้

ตอนนี้คุณทำได้แล้ว

เพราะถึงแม้ Edge จะใช้ Chromium แต่ก็ไม่ใช่ Chrome ยังคงเป็นผลิตภัณฑ์ของ Microsoft และนั่นหมายความว่าคุณจะได้รับคุณภาพของซอฟต์แวร์ที่พวกเขาได้สร้างชื่อเสียงขึ้นมาใหม่ ไม่ใช่ตัวแทนที่อยู่ตรงกลางเสมอของ Google

บันทึกเว็บไซต์เป็น HTML

คุณจะไม่สามารถบันทึกหน้าเว็บเป็น HTML ได้จนกว่าจะอัปเกรด Chromium เมนูบริบทคลิกขวามี...จำกัด พูดน้อย

ด้วยเครื่องยนต์ Chromium นั่นไม่ใช่กรณีอีกต่อไป คุณจะได้เมนูบริบทที่แท้จริงในที่สุด

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

พูดถึงองค์ประกอบที่ควรจะเป็น...

ในที่สุด Edge ก็อนุญาตให้ตรวจสอบหน้าได้

นี่เป็นเรื่องใหญ่สำหรับนักออกแบบเว็บไซต์ การทำงานใน Edge ก่อนหน้านี้แทบจะเป็นไปไม่ได้เลย ไม่ใช่เพราะขาดการสนับสนุนฟีเจอร์ (แม้ว่าจะมีความสำคัญมาก) แต่เนื่องจากคุณไม่สามารถเจาะลึกและตรวจสอบองค์ประกอบแต่ละรายการเพื่อดีบักและแก้ไขปัญหาใดๆ ได้ คุณไม่สามารถปรับแต่งและปรับแต่งงานของคุณได้เป็นอย่างดีเพราะคุณไม่สามารถเข้าถึงงานของคุณได้อย่างง่ายดาย

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

การท่องเว็บแบบส่วนตัวอยู่ที่นี่

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

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

และอื่นๆ อีกมากมาย

นี่เป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็ง และนี่เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของฟีเจอร์ที่นำ Chromium มาไว้ใน Edge ซึ่งจะทำให้นักออกแบบเว็บไซต์เข้าถึงได้

• flat() และ flatMap() จะได้รับการสนับสนุนใน Edge
• โมดูล JavaScript แบบไดนามิกสามารถนำเข้าได้ (ในที่สุด)
• จัดรูปแบบข้อความตัวยึดตำแหน่งด้วย CSS
• display: เนื้อหา พร้อมใช้งานสำหรับผู้ใช้กริด CSS และ flexbox แล้ว
• TextEncoder และ TextDecoder จะทำให้การแสดงสตรีมสดดีขึ้นมาก

โดยพื้นฐานแล้ว ลองคิดแบบนี้: อะไรก็ตามที่ Chrome ทำได้ Edge ก็ทำได้เช่น กัน นั่นเป็นความคิดที่ยอดเยี่ยมไม่ใช่หรือ?

คุณลักษณะเฉพาะของ Microsoft Edge Chromium

Microsoft ไม่ได้เพียงแค่ใช้ Chromium และแทนที่ Edge ด้วย พวกเขากำลังเพิ่มคุณสมบัติของตัวเองเข้าไปด้วย

1. ความปลอดภัยของ Chrome

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

2. คอลเลกชั่นใหม่

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

3. การจำลอง IE

แล้วมี ชิ้นส่วนที่ต่อต้าน : โปรแกรมจำลอง Internet Explorer ในตัว ใช่คุณอ่านถูกต้องแล้ว Microsoft Edge Chromium ใหม่จะมี IE อยู่ภายใน อาจฟังดูล้าหลัง แต่จริงๆ แล้วมันเป็นเรื่องที่สวยงาม ด้วยการสลับไปใช้ Chromium ทำให้ Edge หลุดพ้นจากข้อจำกัดของ IE ทำให้นักพัฒนาและผู้ใช้มีประสบการณ์ที่ดีขึ้นในการก้าวไปข้างหน้า แต่ไซต์เก่าเหล่านั้นที่ออกแบบมาสำหรับ IE โดยเฉพาะ ? พวกนั้นก็จะแตก และธุรกิจจำนวนมากยังคงใช้ IE ดังนั้นการมีอีมูเลเตอร์ภายในเพื่อแสดงแอปและเพจเหล่านั้นหมายความว่าธุรกิจต่างๆ จะไม่ต้องลังเลที่จะอัปเกรดเพราะจะไม่มีการหยุดชะงักในเวิร์กโฟลว์หรือบริการของตน (หรือต้องการการฝึกอบรมเพิ่มเติมหรือ อัปเกรด — ยัง) นั่นเป็นสัมผัสที่ยอดเยี่ยมอย่างแท้จริงโดยทีมการเปลี่ยนผ่าน

อนาคตสดใส

เราหวังว่าจะมีวันหนึ่งในอนาคตอันใกล้ที่เบราว์เซอร์ของ Microsoft จะไม่ กลายเป็นเรื่องตลก เราต้องการให้การย้ายไปยังเอ็นจิ้น Chromium ประสบความสำเร็จและช่วยให้เข้าสู่ยุคของการสร้างมาตรฐานทั่วทั้งเว็บ มันจะดีสำหรับผู้ใช้และนักออกแบบและนักพัฒนา และหากได้รับการจัดการอย่างถูกต้อง (ซึ่งดูเหมือนกับเป็นเช่นนั้น) อินเทอร์เน็ตสามารถเปิดกว้างสำหรับผู้คนจำนวนมากเนื่องจากการเปลี่ยนแปลงนี้ และมันสามารถทำให้ชีวิตของนักออกแบบหลายคนง่ายขึ้นมากเช่นกัน

คุณคิดอย่างไรเกี่ยวกับ Microsoft Edge Chromium

บทความภาพโดย ProStockStudio / shutterstock.com