2021'de İzlenecek 5 Ön Uç Eğilimi

Yayınlanan: 2020-12-17

Web'de dolaşan tonlarca "İzlenecek tasarım eğilimi" makalesi var. Ayrıca 2021'de Hot Web Design Trends to follow 2021'de bir dönüş yaptık. Bu tür makalelere odaklanmak çok anlaşılabilir - tasarımın kendisi hem müşteri hem de ziyaretçinin gördüğü şeydir. Ancak arkasındaki kod çoğu kullanıcı için çoğunlukla alakasızdır.

Ama alakasız görünse de elbette çok önemli. Temiz kod, optimize edilmiş yaklaşımlar ve yeni teknikler, geliştiricilerin ölçeklenebilir bir şekilde güzel tasarımlar sunmalarına olanak tanıyan şeylerdir. Performans , kullanıcıların istediği şeydir, ölçeklenebilirlik müşterinin istediği şeydir.

Bu nedenle, tüm ön uç geliştiricilere gerekli saygının yanı sıra tasarımcılara bazı içgörüler ve fikirler vermek için bu "2021'de İzlenecek Ön Uç Eğilimleri" listesini derledik.

1. CSS Özel Özellikleri

Bu, geliştiricilerin yıllardır istediği bir şeydir, ancak CSS Özel özellikleri (veya aynı zamanda CSS Değişkenleri olarak da bilinir) bir süredir ortalıkta bulunmaktadır. Örneğin, W3C Modül Seviye 1 2015'ten. Ancak her yeni teknolojide olduğu gibi çekiş kazanması biraz zaman alıyor. Ve 2021'de, başlangıcından bu yana en büyük benimseme oranlarından bazılarını göreceğimize inanıyoruz.

Neden Harika?

Özel özellikler aslında CSS'deki değişkenlerdir . "Ama Sass'ta değişkenlerimiz var, değil mi?" Diyebilirsiniz. Evet yaparız! Ancak Sass'ı CSS'ye derlediğinizde, CSS elde edersiniz. Ve değişken yok. Artık bu değişkenin değerini değiştiremezsiniz. $primary: red sadece kırmızıdır.

özel özellikler-desteği

Özel özellikler, Internet Explorer dışında her yerde iyi desteklenir

Ancak, özel özelliklerde --primary: red . Ve sonra örneğin maviye --primary yeniden tanımlayabilirsiniz. Doğrudan tarayıcıda, derlemeye gerek yoktur. Bu CSS hileleri hakkında daha fazla bilgi edinmek için CSS değişkenleri ile ön işlemci değişkenleri arasındaki fark nedir?

Bunları kullanmak için düzgün bir hack, özel temalar içindir. HSL değerlerini değişkenler aracılığıyla tanımlayabilir ve ardından kullanıcıların ön uçtaki bir kaydırıcı aracılığıyla tonu değiştirmesine izin verebilirsiniz. "Renk düzeninizi ayarlayın" işlevselliğiyle kaydırıcı değerini JS ve BAM ile CSS değişkenine bağlayın.

2. Değişken Yazı Tipleri

Değişken yazı tipleri, tıpkı CSS Özel Özellikleri gibi bir süredir piyasadaydı, ancak hala yaygın olarak kullanılmıyor. Bunun bir nedeni, daha popüler hale gelmeleri için ihtiyaç duydukları zaman, geliştiriciler tarafından benimsenmesi için öğretici / kılavuz ve tekniklerin sayısı ve ayrıca ihtiyaç duyulan yazı tipleridir. Herhangi bir yazı tipini seçip değişiklik yapamazsınız.

Göz atmak ve denemek için kullanabileceğiniz web sitelerinden biri Değişken Yazı Tipleridir. Bu terimi ilk kez duymanız durumunda da iyi bir demo görevi görür. Değişken yazı tipleri, tek bir dosya kullanmanıza ve kalınlık veya eğim miktarı üzerinde tam kontrole sahip "font-style" "font-weight" veya "font-style" gibi özellikleri uygulamanıza olanak tanır ...

değişken yazı tipi gif

Kaynak: Web'deki değişken yazı tiplerine giriş

Neden Harika?

Bize, geliştiricilere (ve tasarımcılara) bir yazı tipinin görünümüne neredeyse sonsuz özgürlük verdiği açıktır. Hiç "font-weight: bold" ın biraz fazla olduğunu, ancak "normal" in çok ince olduğunu ve arada bir şey olmadığını düşündünüz mü?

Yazı tipi tasarımcıları bunun çok iyi farkındadır ve genellikle orta özellikler sağlar. Bunları 100 (hafif) veya 900 (çok kalın) gibi sayılarla ve 300, 400, 600, 700 vb. Arasında herhangi bir şeyle etiketlerler. Ama belki 750'ye ihtiyacınız var ve mevcut değil mi? Şimdi, değişken yazı tipleriyle yaparsınız!

Değişken yazı tiplerinin başka bir büyük yararı vardır. Muhtemelen iyi bildiğiniz gibi, yazı tipleri yükleme sürelerine büyük katkıda bulunur. Hem bant genişliği hem de ekrandaki görüntü oluşturma açısından. Oldukça standart bir istek şöyle görünebilir:

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

Tüm bu güzelliklerle, kolayca 500kb'yi geçebilirsiniz. Değişken bir yazı tipiyle, sadece bir yazı tipine ihtiyacınız var ve diğer tüm çeşitlemeleri alırsınız. Bir istek.

Web'deki Değişken Yazı Tipleri: Değişken yazı tiplerine giriş hakkında daha fazla bilgi edinebilirsiniz.

3. Daha fazla JavaScript!

Bu "göz kamaştırıcı" bir başlık, ama doğru! Front-End geliştiricileri sadece "JS Geliştiricileri" değil, aynı zamanda sadece "CSS / HTML" geliştiricileridir. Ve bu başlık onlar içindir.

JavaScript sadece bir trend değildir, ancak kime sorduğunuza bağlı olarak, "Evet ve bugünlerde, JS'yi etkinleştirmediyseniz bir web sitesi bile açamazsınız" veya "hanks for Hakkında sayfanız için 5MB kaydırıcılar ve reklamlar yükleniyor ”.

Ancak ne kadar olumlu ve olumsuz yanları olursa olsun, kullanımı büyüyor. Peki, hangi JS tabanlı teknoloji / yaklaşım / araçlar daha fazla trend olmalı?

  • WordPress gibi CMS'lere bir cephe olarak React / Vue (başsız)
  • WebGL (Three.js) 3B grafikler, simülasyonlar, etkileşim
  • VR ve AR içeriği
  • Daha optimize edilmiş derleme iş akışları (web paketi, yutkunma)
  • Daha fazla kontrol / işlevsellik için tarayıcı API'leri

Daha derinlemesine dalmak için başka bir harika neden eklemek için - yalnızca JS ile, teknik olarak istediğiniz her boyuttaki projeyi teknik olarak oluşturabilirsiniz. Yalnızca JS ile reaktif bir ön uç yapabilir, onu bazı veri depolama alanlarına bağlayabilir, en iyi kullanıcı deneyimi için tarayıcının API'lerini kullanabilir ve projenizi canlı olarak dağıtabilirsiniz. Ayarlarda yapılacak herhangi bir değişiklik, kurulumda kolayca yapılabilir.

4. Fayda Tabanlı Stil

Yardımcı program tabanlı stil, önceden tanımlanmış sınıflar aracılığıyla stilleri uygulamaya odaklanır. Bir web sayfasını biçimlendirmenin genellikle anlamı budur. Ancak burada standart yaklaşımdan biraz farklıdır. Eğer değil stil yapmak, bakınız .card gölge, arka plan, vb tarzı bir HTML elemanı ile .shadow ve .bg-light ve .br-5 (border-radius gibi).

Hızlı bir şekilde bir şeyler çıktısı alması gereken ve CSS hakkında endişelenmeyen JS geliştiricileri için inanılmaz derecede iyi çalışan bir yaklaşımdır.

Bu hiç de yeni değil, ancak Tailwind'in popülaritesi, geliştiricilerin bu yaklaşımı yeniden gözden geçirmelerini sağladı.

Tailwind ana sayfası

Tailwind ana sayfası

Bazıları, CSS'den bir bileşeni gerçekten değiştiremeyeceğiniz ve onu her yerde güncelleyemeyeceğiniz bir yerde "HTML'de CSS yazmak" olduğunu iddia edebilir. Teknik olarak, bu doğrudur, ancak bileşenler JS dosyaları olduğunda bir o zaman tek bir yerde bunları güncellemek DO, örneğin / Vue uygulamasını yanıt verin.

Belki de dezavantajlarından biri, başka bir çerçeve öğrenmeniz gerektiğidir. Bu sadece CSS değil, bazı öğeler şöyle görünebileceğinden özellikleri ezberlemeniz gerekiyor:

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

Her zaman onu seven (ve ondan nefret eden) insanlar olsa da, bu birçok soruna harika bir çözümdür. Ayrıca, gerçekten deneyene kadar sizin için işe yarayıp yaramadığını asla bilemezsiniz .

5. Yeni CSS Özellikleri

Yeni CSS özelliklerini kullanmak başlı başına bir trend olabilir. Belirli bir özellik veya yaklaşımda değişiklik olmasa da, şu ana kadar kodlama şeklimize meydan okuyor. Profesyoneller? Pek çok sorunu çözer. Kötü? Geriye dönük uyumluluk.

Ancak tarayıcı satıcılarının geçen bir veya iki yıldaki ilerlemesi sayesinde (size bakınca, Microsoft), dünyadaki kullanıcıların çoğu web'e her zamankinden daha verimli bir şekilde erişebilir.

ccs gölge parçaları

Başka bir gelecek özellik olarak CSS Gölge Parçaları

CSS Özel özellikleri bu özelliklerden biridir, ancak yaklaşık 5 yaşında (ve oldukça büyük) olduğu için kendi bölümü vardır.

Yazma Modları

Çok sık kullanılmasa da, birçok geliştiricinin sağdan sola dilleri nadiren desteklemesi gerektiğinden, yazma modları mevcuttur. Gösterge tabloları / çerçeveler ve çok dilli siteler için bir zorunluluktur. Örneğin, margin-inline-start gibi yönlü yazma özelliklerinin artırılmış desteği sayesinde, RTL için margin-left-margin-right üzerine yazmak zorunda değilsiniz.

CSS Alt Şebekesi

Esnek olduk, sonra ızgaralarımız vardı. Şimdi, ızgaraların içinde ızgaralarımız var . Alt ızgaralar, geliştiricilerin Grid ilk kez desteklendiğinde kullanıma hazır olması beklenen bir şeydir. Şimdi bizde var ve göründüğü kadar havalı ve kullanışlı. Mansiyon ödülü: Flexbox boşlukları (ızgaraların bir parçası olduğu için). Ne diyorsa onu yapıyor. Ne yazık ki, henüz tam olarak desteklenmiyor.

:is

MDN'den aldığımız bir kod parçacığı ile en iyi açıklanan bir kısayol seçici :

 / * Bir başlık içindeki herhangi bir paragrafı seçer, main
veya üzerine gelinen altbilgi öğesi * /
: is (üstbilgi, ana, altbilgi) p: hover {
kırmızı renk;
imleç: işaretçi;
}
 / * Yukarıdakiler şuna eşdeğerdir * /
başlık p: hover,
ana s: vurgulu,
altbilgi p: hover {
kırmızı renk;
imleç: işaretçi;
}