5 Front-End Trends ที่ต้องติดตามในปี 2021

เผยแพร่แล้ว: 2020-12-17

มีบทความ“ เทรนด์การออกแบบที่น่าติดตาม” มากมายในเว็บ นอกจากนี้เรายังให้ความสำคัญกับเทรนด์การออกแบบเว็บยอดนิยมที่จะติดตามในปี 2021 อีกด้วยการมุ่งเน้นไปที่บทความดังกล่าวเป็นสิ่งที่เข้าใจได้อย่างมากการออกแบบนั้นเป็นสิ่งที่ทั้งลูกค้าและผู้เยี่ยมชมเห็น อย่างไรก็ตามโค้ดที่อยู่เบื้องหลังส่วนใหญ่ไม่เกี่ยวข้องกับผู้ใช้ส่วนใหญ่

แต่ถึงแม้ว่ามันจะดูไม่เกี่ยวข้อง แต่ก็สำคัญมาก Clean code, แนวทางที่ปรับให้เหมาะสมและเทคนิคใหม่ ๆ คือสิ่งที่ ช่วยให้ นักพัฒนาสามารถนำเสนอการออกแบบที่สวยงามในแบบที่สามารถปรับขนาด ประสิทธิภาพ คือสิ่งที่ผู้ใช้ต้องการ ความสามารถในการปรับขนาด คือสิ่งที่ลูกค้าต้องการ

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

1. คุณสมบัติที่กำหนดเอง CSS

นี่เป็นสิ่งที่นักพัฒนาต้องการมาหลายปีแล้วแม้ว่าคุณสมบัติ CSS Custom (หรือที่เรียกว่า CSS Variables) จะมีมาระยะหนึ่งแล้ว ตัวอย่างเช่นโมดูล W3C ระดับ 1 มาจากปี 2015 แต่เช่นเดียวกับเทคโนโลยีใหม่ ๆ ต้องใช้เวลาสักพักในการดึง และเราเชื่อว่าในปี 2564 เราจะเห็นอัตราการรับเลี้ยงบุตรบุญธรรมที่ใหญ่ที่สุดตั้งแต่เริ่มก่อตั้ง

ทำไมมันเจ๋ง?

คุณสมบัติที่กำหนดเองเป็น ตัวแปร ใน CSS คุณอาจพูดว่า“ แต่เรามีตัวแปรใน Sass ใช่หรือไม่?” ใช่พวกเราทำ! แต่เมื่อคุณคอมไพล์ Sass เป็น CSS คุณจะได้ CSS และไม่มีตัวแปร คุณไม่สามารถเปลี่ยนค่าของตัวแปรนั้นได้อีกต่อไป $primary: red เป็นเพียงสีแดง

คุณสมบัติที่กำหนดเองสนับสนุน

คุณสมบัติแบบกำหนดเองได้รับการสนับสนุนอย่างดีในทุกที่ยกเว้น Internet Explorer

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

การแฮ็กอย่างประณีตอย่างหนึ่งที่จะใช้สำหรับการกำหนดธีมเอง คุณสามารถกำหนดค่า HSL ผ่านตัวแปรจากนั้นอนุญาตให้ผู้ใช้เปลี่ยนสีผ่านแถบเลื่อนที่ส่วนหน้า เชื่อมต่อค่าตัวเลื่อนกับตัวแปร CSS ด้วย JS และ BAM ด้วยฟังก์ชัน“ ตั้งค่าโครงร่างสีของคุณ”

2. แบบอักษรตัวแปร

แบบอักษรตัวแปรเช่นเดียวกับคุณสมบัติที่กำหนดเอง CSS มีมาระยะหนึ่งแล้ว แต่ยังไม่ได้ใช้กันอย่างแพร่หลาย เหตุผลประการหนึ่งคือเวลาที่พวกเขาต้องการที่จะได้รับความนิยมมากขึ้นจำนวนบทช่วยสอน / คำแนะนำและเทคนิคต่างๆเพื่อให้นักพัฒนานำไปใช้รวมทั้งแบบอักษรที่ต้องการ คุณไม่สามารถเลือกแบบอักษรใด ๆ และใช้การเปลี่ยนแปลงได้

หนึ่งในเว็บไซต์ go-to ที่คุณสามารถใช้เรียกดูและทดลองได้คือ Variable Fonts นอกจากนี้ยังเป็นตัวอย่างที่ดีในกรณีที่คุณได้ยินคำนี้เป็นครั้งแรก แบบอักษรที่ปรับเปลี่ยนได้ช่วยให้คุณสามารถใช้ ไฟล์ เดียว และใช้คุณสมบัติเช่น "font-weight" หรือ "font-style" โดย สามารถควบคุม ปริมาณความหนาหรือความเอียงได้อย่างสมบูรณ์ ...

ตัวแปรแบบอักษร gif

ที่มา: ข้อมูลเบื้องต้นเกี่ยวกับฟอนต์ตัวแปรบนเว็บ

ทำไมมันเจ๋ง?

เป็นที่ชัดเจนว่ามันทำให้เรานักพัฒนา (และนักออกแบบ) มี อิสระ ในการมองเห็นแบบอักษร คุณเคยคิดบ้างไหมว่า "font-weight: bold" นั้นมากเกินไป แต่ "ปกติ" นั้นบางเกินไปและคุณไม่มีอะไรอยู่ระหว่างนั้น?

นักออกแบบฟอนต์ตระหนักดีมากและมักจะให้คุณสมบัติตรงกลาง พวกเขาติดป้ายด้วยตัวเลขเช่น 100 (เบา) หรือ 900 (หนามาก) และอะไรก็ได้เช่น 300, 400, 600, 700 เป็นต้น แต่บางทีคุณอาจต้องการ 750 และมันไม่สามารถใช้ได้? ตอนนี้ด้วยแบบอักษรที่หลากหลายคุณทำได้!

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

  • headings-font-normal.woff2
  • headings-font-bold.woff2
  • body-normal.woff2
  • body-italic.woff2
  • body-bold.woff2

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Variable Fonts: ข้อมูลเบื้องต้นเกี่ยวกับฟอนต์ตัวแปรบนเว็บ

3. JavaScript เพิ่มเติม!

นี่คือชื่อเรื่องที่ "สะดุดหู" แต่เป็นเรื่องจริง! นักพัฒนา Front-End ไม่เพียง แต่เป็น“ JS Developers” เท่านั้น แต่ยังเป็นเพียงนักพัฒนา“ CSS / HTML” ด้วย และหัวข้อนี้มีไว้สำหรับพวกเขา

JavaScript ไม่ได้เป็นเพียงเทรนด์ แต่ขึ้นอยู่กับว่าคุณถามใครการสนทนาที่ร้อนแรงบางอย่างอาจเกิดขึ้นพร้อมกับความคิดเห็นเช่น "ใช่และในปัจจุบันคุณไม่สามารถเปิดเว็บไซต์ได้หากคุณไม่ได้เปิดใช้งาน JS" หรือ "แฮงค์สำหรับ กำลังโหลดแถบเลื่อนและโฆษณาขนาด 5MB สำหรับหน้าเกี่ยวกับคุณ”

แต่ไม่ว่าจะมีด้านบวกและด้านลบมากแค่ไหนการใช้งานก็เติบโตขึ้น ดังนั้นเทคโนโลยี / วิธีการ / เครื่องมือที่ใช้ JS ใดที่ควรมีแนวโน้มมากขึ้น?

  • React / Vue เป็นหน้า CMS เช่น WordPress (headless)
  • WebGL (Three.js) กราฟิก 3 มิติการจำลองการโต้ตอบ
  • เนื้อหา VR และ AR
  • ขั้นตอนการสร้างที่เหมาะสมยิ่งขึ้น (webpack, gulp)
  • API ของเบราว์เซอร์เพื่อการควบคุม / การทำงานที่มากขึ้น

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

4. การจัดแต่งทรงผมตามยูทิลิตี้

การจัดรูปแบบตามยูทิลิตี้มุ่งเน้นไปที่การใช้สไตล์ผ่านคลาสที่กำหนดไว้ล่วงหน้า นั่นคือความหมายของการออกแบบหน้าเว็บโดยทั่วไป อย่างไรก็ตามนี่เป็นวิธีที่แตกต่างจากแนวทางมาตรฐานเล็กน้อย ดูคุณไม่ได้จัดรูปแบบ. .card มีเงาพื้นหลัง ฯลฯ คุณจัดรูปแบบองค์ประกอบ HTML ด้วย. .shadow และ. .bg-light และ. .br-5 (เช่น border-radius)

เป็นแนวทางที่ใช้งานได้ดีอย่างน่าอัศจรรย์สำหรับนักพัฒนา JS ที่เพียงแค่ต้องการส่งออกบางสิ่งอย่างรวดเร็วและไม่ต้องกังวลกับ CSS

นี่ไม่ใช่เรื่องใหม่ แต่ความนิยมของ Tailwind ทำให้นักพัฒนาหันมาพิจารณาแนวทางนี้ใหม่

หน้าแรกของ Tailwind

หน้าแรกของ Tailwind

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

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

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

แม้ว่าจะมีคนที่รัก (และเกลียดชัง) อยู่เสมอ แต่ก็เป็นทางออกที่ดีสำหรับปัญหามากมาย นอกจากนี้คุณจะไม่มีทางรู้เลยว่ามันเหมาะกับคุณหรือไม่จนกว่าคุณจะได้ ลองใช้ จริงๆ

5. คุณสมบัติ CSS ใหม่

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

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

ชิ้นส่วนเงา ccs

CSS Shadow Parts เป็นอีกหนึ่งคุณสมบัติที่กำลังจะมาถึง

คุณสมบัติที่กำหนดเองของ CSS เป็นหนึ่งในคุณสมบัติเหล่านี้ แต่มีอายุประมาณ 5 ปี (และค่อนข้างใหญ่) มีส่วนของตัวเอง

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

แม้ว่าจะไม่ได้ใช้บ่อยเกินไปเนื่องจากนักพัฒนาหลายคนแทบไม่จำเป็นต้องรองรับภาษาจากขวาไปซ้าย แต่ก็มีโหมดการเขียน สิ่งเหล่านี้เป็นสิ่งจำเป็นสำหรับแดชบอร์ด / เฟรมเวิร์กและไซต์หลายภาษา ด้วยการสนับสนุนที่เพิ่มขึ้นของคุณสมบัติการเขียนแบบกำหนดทิศทางเช่น margin-inline-start เป็นต้นคุณไม่จำเป็นต้องเขียนทับระยะขอบซ้ายเป็นระยะขอบขวาสำหรับ RTL

CSS Subgrid

เราดิ้นแล้วเราก็มีกริด ตอนนี้เรามี กริดภายในกริด Subgrids เป็นสิ่งที่นักพัฒนาคาดว่าจะพร้อมใช้งานนอกกรอบเมื่อรองรับ Grid ครั้งแรก ตอนนี้เรามีแล้วและมันก็เจ๋งและมีประโยชน์อย่างที่คิด รางวัลชมเชย: Flexbox gaps (เนื่องจากเป็นส่วนหนึ่งของกริดด้วย) มันทำตามที่พูด น่าเศร้าที่ยังไม่ได้รับการสนับสนุนอย่างดี

:is

ตัวเลือกชวเลขที่อธิบายได้ดีที่สุดด้วยข้อมูลโค้ด ที่เรานำมาจาก MDN:

 / * เลือกย่อหน้าใด ๆ ภายในส่วนหัวหลัก
หรือองค์ประกอบส่วนท้ายที่ถูกวางไว้ * /
: is (header, main, footer) p: hover {
สี: แดง;
เคอร์เซอร์: ตัวชี้;
}
 / * ข้างต้นเทียบเท่ากับต่อไปนี้ * /
ส่วนหัว p: โฮเวอร์
p หลัก: โฮเวอร์
ส่วนท้าย p: hover {
สี: แดง;
เคอร์เซอร์: ตัวชี้;
}