.card { display: grid; grid-template-columns: 150px 1fr; gap: 1rem;
}
.card .nav { display: flex; gap: 0.5rem;
}

Düzen

gerçekten öğrenmelisin flexbox'a ve Grid Eğer yapmadıysanız - bu günlerde gerçekten CSS geliştirmenin temel taşları. CSS3'te sahip olduğumuz herhangi bir özellikten bile daha fazlası.

Grid, hesaba kattığınızda ekstra güçlüdür alt ızgara ve duvarcılık, ikisi de henüz güvenilir bir çapraz tarayıcı değildir, ancak muhtemelen çok uzun zaman önce olacaktır.

html { --bgColor: #70f1d9; --font-size-base: clamp(1.833rem, 2vw + 1rem, 3rem); --font-size-lrg: clamp(1.375rem, 2vw + 1rem, 2.25rem);
} html.dark { --bgColor: #2d283e;
}

CSS Özel Özellikleri

Özel özellikler ayrıca birkaç nedenden dolayı büyük bir anlaşma. Projenizdeki tasarım belirteçleri için eviniz olabilirler, bu da bir projenin bakımını ve tutarlı kalmasını kolaylaştırır. Renk teması, örneğin karanlık mod.

kadar gidebilirsin tüm sitelerin tasarımı kullanma çoğunlukla özel özellikler. Ve bu satırlar boyunca, görmezden gelemezsin Tailwind bugünlerde. Tüm bir siteyi HTML'de sınıflarla şekillendirme yaklaşımı, birçok insanda doğru akoru (ve birçok insanda yanlış akoru, bu yüzden sizinle oynamıyorsa endişelenmeyin).

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001s !important; }
} @media (prefers-color-scheme: dark) { :root { --bg: #222; }
}

Tercih Sorguları

Tercih sorguları genellikle @media sorgular yıllardır farklı tarayıcı boyutlarına yanıt vermek için kullandığımız gibi, ancak şimdi işletim sistemi düzeyinde belirli kullanıcı tercihlerini algılamanın yollarını içeriyor. İki örnek prefers-reduced-motion ve prefers-color-scheme. Bunlar, bir kullanıcının ideal deneyimine daha yakından saygı duyan arayüzler oluşturmamızı sağlar. Una'nın gönderisini oku.

.block { background: hsl(0 33% 53% / 0.5); background: rgb(255 0 0); background: /* can display colors no other format can */ color(display-p3 0.9176 0.2003 0.1386) background: lab(52.2345% 40.1645 59.9971 / .5);} background: hwb(194 0% 0% / .5);
}

Renk Değişiklikleri

Renk sözdizimi, işlev adını değiştirmeden alfa (saydamlık) kabul eden işlevlere taşınıyor. Örneğin, CSS3 günlerinde saf mavi istiyorsanız, şunu yapabilirsiniz: rgb(0, 0, 255). Ancak bugün bunu virgülsüz bir tarzda yapabilirsiniz (her ikisi de işe yarar): rgb(0 0 255)ve ardından farklı bir işlev kullanmadan alfa ekleyin: rgb(0 0 255 / 0.5). için aynı kesin durum hsl(). Sadece küçük bir incelik ve gelecekteki renk fonksiyonlarının nasıl olacağı bir tek çalışır.

Gelecekteki renk sözdizimlerinden bahsetmişken:

body { font-family: 'Recursive', sans-serif; font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Değişken Fontlar

Web yazı tipleri bir CSS3'teki büyük şey. şimdi var değişken yazı tipleri. Sen de onların var olduğunu biliyor olabilirsin. Her ikisi de bazı harika tasarım olasılıklarının kilidini açar ve bazen performans için iyi olabilir (örneğin, aynı yazı tipinin kalın ve italik sürümleri için artık farklı yazı tipi dosyalarını yüklemeye gerek kalmaması gibi). şöyle bir şey var renkli yazı tipleri ama internette pek popülerlik görmediklerini söyleyebilirim. destek.

.cut-out { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mask { mask: url(mask.png) right bottom / 100px repeat-y;
}

.move-me { offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite;
} @keyframes move { 100% { offset-distance: 100%; }
}

Yollar

SVG ayrıca CSS3'ten beri patladı. Yapabilirsin düz kırpma aracılığıyla şekillere herhangi bir eleman clip-path, SVG benzeri nitelikleri CSS'ye getiriyor. Sadece bu değil, aynı zamanda yollar boyunca öğeleri canlandırabilir, öğeleri yollar boyunca yüzdürebilir ve hatta SVG öğelerinin yollarını güncelleyebilirsiniz.

Bunların hepsi bana ruhen bağlı gibi geliyor:

• clip-path — öğeleri kelimenin tam anlamıyla şekiller halinde kırpmamıza olanak tanır.
• masks — kırpmaya benzer, ancak bir maske, maskenin alfa kanalına dayalı olmak gibi başka niteliklere sahip olabilir.
• offset-path - genellikle amacıyla bir öğenin yerleştirilebileceği bir yol sağlar o yol boyunca canlandırıyor.
• shape-outside - yüzen bir öğe üzerinde diğer öğelerin etrafına sarıldığı bir yol sağlar.
• d — bir SVG'ler d öznitelik bir <path> olabilir CSS ile güncellendi.

.disable { filter: blur(1px) grayscale(1);
} .site-header { backdrop-filter: blur(10px);
} .styled-quote { mix-blend-mode: exclusion;
} 

CSS Filtreleri

Bu günlerde doğrudan CSS'de mümkün olan çok sayıda görüntü işleme (diğer DOM öğelerinden bahsetmiyorum bile) var. tam anlamıyla var filter, ama arkadaşları var ve hepsinin farklı kullanımları var.

Bunların hepsi bana ruhen bağlı gibi geliyor:

• filter — parlaklık, kontrast, gri tonlama, doygunluk vb. gibi Photoshop benzeri her türlü efekt. Bulanıklaştırma gerçekten eşsiz bir güçtür.
• background-blend-mode — yine, katmanları nasıl karıştırabileceğiniz konusunda Photoshop'u çağrıştıran. Karartmak ve birleştirmek için katmanları çoğaltın. Arka planı ve rengi karıştırmak için bindirme. Açıklaştırma ve koyulaştırma, web tasarımında gerçek faydası olan klasik efektlerdir ve daha ezoterik bir aydınlatma efektinin ne zaman havalı bir görünüm yaratacağını asla bilemezsiniz.
• backdrop-filter - sahip olduğunuz aynı yetenekler filter, ama onlar sadece uygulamak tüm öğeye değil arka plana. Yalnızca arka planı bulanıklaştırmak özellikle yararlı bir etkidir.
• mix-blend-mode - sahip olduğunuz aynı yetenekler background-blend-mode, ancak arka planlarla sınırlı olmak yerine tüm öğe için getirin.

import "https://unpkg.com/extra.css/confetti.js";

body { background: paint(extra-confetti); height: 100vh; margin: 0;
}

Houdini

Houdini gerçekten tamamı CSS'yi JavaScript ile genişletmeye veya en azından CSS ve JavaScript'in kesiştiği noktaya dayanan bir teknolojiler koleksiyonudur.

• Paint API - oluşturulan bir görüntüyü döndürür <canvas> API'ler ve özel özellikler aracılığıyla kontrol edilebilir.
• Özellikler ve Değerler API / Typed OM — türlere değerler verir (örn. 10px) aksi takdirde dizeler olurdu.
• Düzen API'si — kendinizinkini oluşturun display özellikleri.
• Animasyon API'si

Kombine, bunlar bazılarını yapar Gerçekten mi harika demolarOlsa tarayıcı desteği dağınık. Houdini'nin sihrinin bir kısmı, içe aktarması ve kullanımı oldukça kolay olan Workletler olarak gönderilmesidir, bu nedenle, kullanımı önemsiz hale getirirken güçlü işlevselliği modülerleştirme potansiyeline sahiptir.

my-component { --bg: lightgreen;
} :host(.dark) { background: black; } my-component:part(foo) { border-bottom: 2px solid black;
}

Gölge DOM

Gölge DOM ile oynadıysanız biraz ortaya çıkıyor <svg> ve <use> öğe. Gelen "klonlanmış" öğe, "aracılığıyla" nasıl seçebileceğinizle ilgili sınırlamaları olan bir gölge DOM'ye sahiptir. Sonra, içeri girdiğinde <web-components>, aynı balmumu topu.

Web bileşenlerine stil vermeniz gerektiğini düşünüyorsanız, temelde dört seçenek olduğunu biliyorum dışarıdan." Ve hakkında bilmek ilginizi çekebilir yerel CSS modülleri ve yapılandırılabilir stil sayfaları.