Özel CSS özelliği: derinlemesine yeni başlayan kılavuz
Bu yazıda, CSS değişkeni olarak da bilinen CSS Custom özelliği hakkında konuşacağız. Kullanımı daha popüler hale gelir. Örneğin, varsayılan yirmi yirmi bir tema stilini açarsanız, orada birçok tema bulacaksınız.
Bunun nedenlerinden biri, tarayıcılarının desteğinin çok iyi olması, silahlarınızda ve kullanışlı CSS özelliklerinde geçerli bir araç haline getirmesidir. CSS özel mülkiyet bilginiz sınırlıysa ve daha fazlasını bilmek istiyorsanız, doğru yere geldiniz. Aşağıda, gerçekte ne, artılar ve eksiler, nasıl kullanılacağı ve bazı örnekler ve kullanım vakaları hakkında konuşacağız.Özel CSS özelliği nedir? Nasıl yapılır bölümüne girmeden önce, önce özel özelliklerin ne olduğunu konuşalım. Yukarıda belirtildiği gibi, bilinen bir başka isim CSS değişkenidir. Bunun bizi işlevine yaklaştırdığını bilmek. Web, matematik ve diğer disiplinlerin geliştirilmesinde değişkenler diğer değerlerin yerine geçer. Lisede X’i çözmeniz istenebilir ve x = 2 gibi sonuçlarla biter. CSS değişkenleri aynıdır. Bunlar, başka değerleri temsil eden veya içeren markerlerdir. Aşağıdaki görünüm: renk: var (-Global-Color-Primary); Yukarıdaki örnekte görebileceğiniz gibi, renk yerine doğru değer olarak ilan edilir, burada, aksine var (-global-renk-primer) söylenir.
Bunu neden sadece HTML renk kodu yazmak yerine bu şekilde yapıyorsunuz? Şimdi bunun hakkında konuşalım. Değişken CSS: CSS’nin varsayılan olarak işaretlemesinin faydaları çok tekrarlanır. Örneğin, web siteniz için bir renk şeması ayarladıysanız, tasarım boyunca aynı beş veya daha fazla renk için bir beyan kullanacaksınız – tekrar tekrar. . Navigasyon {renk: #28303d; }. Footer-Navigation {renk: #28303d; }. Entry-footer {color: #28303d; } Bu aynı zamanda, renk şemanızı veya hatta sadece bir renk tonunu değiştirmek istiyorsanız, bu örneğin her birini bulup değiştirmeniz gerektiği anlamına gelir. Tabii ki, kod düzenleyicisi bunu çok kolaylaştırır, ancak CSS değişkeni daha iyi bir yol sunar. Herhangi bir zamanda aynı rengi bildirmek yerine, bir yer tutucu kullanabilir ve mülkü sadece bir kez, bir merkezi yerde belirleyebilirseniz? Kulağa hoş geliyor mu? Çünkü CSS Custom özelliği böyle çalışır. Body {-Global-Color-Primary: #28303d; }. Navigation {color: var (-Global-Color-Primary); }. Footer-Navigation {color: var (-Global-Color-Primary); }. Entry-footer {color: var (-global-color-primary); } Tahmin edebileceğiniz gibi, bu, özel CSS mülkünün ana avantajlarından biri olan çok zaman ve web geliştiricisi ve tasarımcılarından tasarruf edebilir.
Ayrıca, daha kolay tanınırlar ve anlaşılırlar. -Global-Color-Primary, #28303D gibi rastgele renklerden daha açıktır ve özellikle kendinizi yazmadığınız, çok daha kolay bir işaretleme anlayışı yapabilir. Buna ek olarak, özel CSS özelliğinin kullanımı tekrarlamayı azaltır (bkz. Kuru Kodlama – Kendinizi Tekrarlamayın), bilgi işlem süresinde, disk alanı ve yükleme süresindeki tasarruf anlamına gelebilir. Yirmi yirmi bire tıklamada mevcut olduğu gibi karanlık mod gibi birden fazla renk şeması sunmak için bile kullanabilirsiniz. Özel özellikler de çok esnektir ve aşağıda göreceğimiz gibi birçok pratik kullanım durumuna sahiptir.
Ayrıca, JavaScript ile iyi çalışırlar. .GetPromPerTyValue () ve .SetProlPerpty () yöntemiyle kolayca hedefleyebilir ve çeşitli şekillerde manipüle edebilirsiniz. Son olarak, girişte belirtildiği gibi, tarayıcı desteği çok iyidir. Özel mülkiyet eksikliği öyleyse, bu CSS özelliğini kullanarak bir kayıp var mı? Tabii ki, madalyonun diğer tarafı olmadan hiçbir şey yok. Bu durumda, ek bir karmaşıklık olabilir. Birçok değişken kullanıyorsanız, adı ve değişkenlerin ne yaptığını izlemeniz gerekir. Buna ek olarak, özel CSS özellikleri eski tarayıcılarla uyumlu değildir ve geri dönüşü bildirmek her zaman kolay değildir (aşağıda tartışacağız). Son olarak, kullanımına bağlı olarak, özel CSS özelliğinin sayfa performansı üzerinde bir etkisi olabilir. Sayfa hızı web siteleri için çok önemli bir kalite işaretleyici olduğundan, bu bilmeniz gereken bir şeydir. Ancak, genel olarak, bu teknolojinin profesyoneli sözleşmesinden daha büyüktür. Bakalım nasıl kullanabilirsin, ha? CSS Değişken Adım-Demon-Adımı Nasıl Kullanılır Özel özelliği kullanmak için yapmanız gereken ilk şey onu tanımlamaktır. Geçerli CSS değerleri alabilirler: renk, boyut, dize, zaman, herhangi bir şey.-Ana renkli: #1f8aad; -Default-Box-Shadow: 0 0 2px 2px RGBA (0, 0, 0, 0.6); -letter-aralık: normal; -Font-Primary: -Aple-System, BlinkMacsytemFont, Roboto, sans-serif; -Logo-max-width: 300px; İkincisi, kapsamlarını da tanımlayan seçmenlerde olmalılar. Genel uygulama, seçmenlerin altındaki stil sayfanızın başında, renk şeması gibi küresel olarak kullanmak istediğiniz mülkü belirlemektir: kök. : Kök {-Global-Color-Black: #000; -Global-Color-Dark-Gray: #28303d; -Global-Renk-Gray: #39414D; -Global-renk-ışık-gray: #f0f0f0; } Merak ediyorsanız,: HTML ile aynı ama daha spesifik.
Yukarıdaki örnekten öğrendiğiniz gibi, CSS’deki değişkenin nasıl beyan edileceği önüne koymaktır. Belirlendikten sonra, içinde özel bir özelliğin adı ile Var () üzerinden ihtiyacınız olan her yerde değişkenleri kullanabilirsiniz.
.Entry-concenta {color: var (-Global-Color-Gray-Gray); } Oldukça kolay, değil mi? Hatırlanması gereken başka şeyler:
Özel özellik adları harfler, numaralar, konektörler içerebilir
Büyük harfe/küçük harfe duyarlıdırlar, bu nedenle -aincolor ve -maincolor farklı değişkenler olarak ele alınacaktır, bu nedenle ana öğe için özel özellikler tanımlarsanız, ancak çocukları değil, sonuncusu özel özellikler kullanıldığında ana değeri devralacaktır.
Ve sadece bu, bu, CSS değişkenini en temel düzeyde kullanmanın bir yoludur. Tabii ki, şeytan ayrıntılardadır, bu yüzden diğer konuları keşfetmek için bazı kullanım vakalarını ve pratik örnekleri tartışalım.
CSS özel mülkiyetini daha iyi anlamak için durumları ve örnekleri kullanın, uygulamalarının izlenimini elde etmek için bu yazıyı birkaç pratik örnekle tamamlayacağız. Değişkenleri CSS değişkeni hakkındaki serin değişkene yerleştirin. Küresel ana rengini ayarlamak ve sınırınız için aynı rengi kullanmak istediğinizi varsayalım. Bunu şöyle yapabilirsiniz :: root {-Global-Color-Sınır: var (-Global-Color-Prevate); } Bunu neden yapıyor? Değişken Adlandırma Sözleşmesine geldi. Sınırın rengini daha fazla belirlerken, küresel bir birincil renk mi yoksa başka bir şey mi olduğundan emin olmayabilirsiniz. Ancak bilmenize gerek yok. Sadece küresel sınır rengini kullanmanız gerekir ve geri kalanı halledilir.
Değer Değer, daha önce belirtildiği gibi, özel mülkiyeti belirlediğiniz CSS seçmenleri de kapsamı belirler. Bu aynı zamanda içeriğe bağlı olarak mülk değerini değiştirebileceğiniz anlamına gelir. : Kök {-ain-color: #1f8aad; } .landing-page-header {-ain-color: #183CBA; Renk: var (-ain-color); } Yukarıdaki örnekte, seçmenler altında ana renk tanımladık: küresel olarak tanımlamak için kök. Ancak, .landing-page-başlık bağlamında farklı değerlere sahip olmak istiyoruz. Bu nedenle, kullanmadan önce yeni seçmenler altında Main-Color’u yeniden tanımladık. Bu, başlangıç değerine dokunmadan bu bağlam için bir istisna oluşturur. İyi tarayıcı desteğine rağmen eski tarayıcıların yerini alıyor, eski tarayıcılar özel CSS özelliklerinde zorluk çekiyor. Bu nedenle, bazen bir geri dönüş girmek gerekir. Bununla birlikte, bu, örneğin, yalnızca bazı seçenekler sunabileceğiniz ve tarayıcıların telefonla çalışabileceği bir yazı tipi ailesi kadar kolay çalışmaz. Bunun yerine, birçok durumda, önce geri dönüşü bildirmeli ve ardından özel mülkiyetle takip etmelisiniz. : Kök {-ain-color: kırmızı; }. ENTRY-HEADER {arka plan-color: kırmızı; / * Geri dönüş */ arka plan-color: var (-ain-color);
} Bu şekilde, daha yeni bir tarayıcı ikinci beyanı alacaktır (çünkü birincisi var), ancak CSS değişkenini bilmeyen eski tarayıcı sadece ikinci satırı geçersiz olarak görmezden gelecektir. Bir geri dönüşe ihtiyacımız olabileceği başka bir durumun kaybedilen değerinin yerine, özel bir mülk değerinin belirlenmediği zamandır. Bunun gibi şeyler bazen olur ve önemli şeyler göz ardı edilir. Endişelenmeyin, CSS değişkeni de kasaya izin verir ve şuna benzer:. Widget-title {font-family: var (-heading-font, roboto); } Özel bir özellik başlıklı-font belirlenmezse, tarayıcı hemen aşağı inebilir ve Roboto Geri Alımını kullanabilir. Bu aslında oldukça kolay. Hatırlamanız gereken tek şey, geri dönüşün de var () braketler () ‘de olması gerektiğidir. Değişkeni diğer değişkenlerin geri dönüşü olarak da kullanabilir ve ek geri dönüş değerleri ekleyebilirsiniz. .Widget-Title {font-family: var (-heading-font, var (-base-font, roboto)); } Operasyonlar Yukarıdaki CSS değişkenlerini kullanarak gerçekleştirin, işlemde CSS özel özelliğini de kullanabilirsiniz. Calc () ile istediğiniz gibi ekleyebilir, azaltabilir, çarpabilir ve bölebilirsiniz. Bunu, ilk yazı tipi boyutu değişse bile aynı kalan yazı tipi boyutu oranını belirlemek için kullanabilirsiniz. : kök {-Font-Boy-Base: 1.25Rem; -Heading-FONT-BOYSE-H1: Calc (2.5 * var (-font-boyut base :)); -Heading-FONT-BOYSE-H2: Calc (2 * var (-font-boyut base :)); -Heading-FONT-BOYSE-H3: Calc (1.75 * var (-font-boyut base :));
