प्रौद्योगिकी साझेदारी

CSS [विस्तृतव्याख्यानम्] इष्टगुणाः (CSS चर इति अपि ज्ञायन्ते)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

चर घोषयतु - - .

चरनामकरणनियमाः

  • संख्यात्मकनामकरणस्य समर्थनं कुर्वन्तु
  • डैश्स्, रिक्तस्थानानि च सह नामकरणं समर्थयति
  • चीनीभाषायाः अन्येषां च CJK ग्रन्थानां समर्थनं करोति
  • $, [,], ^, (,), %, ", इत्यादीनि विशेषवर्णानि युक्तानि नामानि समर्थितानि न सन्ति । एतेषां विशेषवर्णानां उपयोगाय भवद्भिः backslash escape इत्यस्य उपयोगः करणीयः ।

चरः

किमपि मूल्यं वा भवितुम् अर्हति वाअभिव्यक्ति

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);

  • 1
  • 2
  • 3
  • 4

चर व्याप्ति

वंशजतत्त्वानि पूर्वजतत्त्वैः सेट् कृतं CSS अपरिवर्तितं उत्तराधिकारं प्राप्तुं शक्नुवन्ति ।कस्टम् गुणाःमूल्यम्‌।

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

वैश्विक चर

:root {
  --borderColor: #ccc;
}

  • 1
  • 2
  • 3

चरानाम् लक्षणम्

चरमूल्यानि परस्परं पारयितुं शक्यन्ते

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}

  • 1
  • 2
  • 3
  • 4

css चराः स्वयमेव मूल्यानि नियुक्तुं न शक्नुवन्ति

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);

  • 1
  • 2

css चराः @media media विशेषतायाः मूल्यरूपेण उपयोक्तुं न शक्यन्ते

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}

  • 1
  • 2
  • 3
  • 4
  • 5

सामग्रीगुणमूल्यानां रूपेण CSS चरानाम् कोऽपि प्रभावः नास्ति

/* 无效 */
.bar::before {
    content: var(--percent);
}

  • 1
  • 2
  • 3
  • 4

चर var() इत्यस्य उपयोगं कुर्वन्तु ।

p {  
   background-color: var(--any-what, deepskyblue); 
}

  • 1
  • 2
  • 3

deepskyblue इतिपूर्वनिर्धारितं मूल्यम्, deepskyblue इत्यस्य उपयोगं कुर्वन्तु यदा –किमपि-किं असिद्धं भवति

यदा var() फंक्शन् पैरामीटर् अवैधः भवति

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}

  • 1
  • 2
  • 3
  • 4
  • 5

शरीरस्य अन्तिमपृष्ठभूमिवर्णः पारदर्शकः भवति यतोहि पृष्ठभूमि-वर्णस्य आरम्भिकं मूल्यं पारदर्शकं भवति

यावत् var() फंक्शन् इत्यस्य प्रथमं पैरामीटर् मूल्यं वैधं भवति, यावत् पैरामीटर् मूल्यं गडबडं भवति चेदपि, सामान्यतया तत् विश्लेषणं भविष्यति । यदि प्रथमं पैरामीटर् मूल्यं अवैधं भवति तर्हि var() फंक्शन् वर्तमान CSS गुणस्य प्रारम्भिकमूल्यं वा उत्तराधिकारं मूल्यं वा (यदि उत्तराधिकारः अस्ति) समाधानं करोति, अर्थात् अनिर्धारितवैश्विककीवर्डस्य नियमानुसारं प्रतिपादितं भवति (ध्यायन्तु यत् रेण्डरिंग् नियमाः समानाः सन्ति, ते च प्रत्यक्षतया अनसेट् कीवर्डं सेट् कर्तुं तुल्याः न सन्ति ।)

var() फंक्शन् इत्यस्य trailing spaces इति विशेषता

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

अन्तिमशरीरस्य फन्ट्-आकारः १४px अस्ति

सिद्धान्तः : अत्र font-size:var(–size)px font-size:20 px इत्यस्य बराबरम् अस्ति ध्यानं कुर्वन्तु यत् 20 इत्यस्य अनन्तरं रिक्तस्थानम् अस्ति, यत् अवैधरूपेण font-size attribute value अस्ति । यतः var(-size)px व्याकरणिकरूपेण कानूनी अस्ति, font-size:16px पुनः सेट् भविष्यति, तथा च 14px इत्यस्य मातापितृतत्त्वेन सेट् कृतः font आकारः अन्ते उपयुज्यते ।

सुधारयोजना अस्ति : १.

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}

  • 1
  • 2
  • 3
  • 4

वा

body {
    --size: 20px;   
    font-size: var(--size);
}

  • 1
  • 2
  • 3
  • 4

js CSS global variable इत्यस्य मूल्यं प्राप्नोति

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");

  • 1
// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);

  • 1
  • 2
  • 3
  • 4

js CSS वैश्विकचरानाम् मूल्यं परिवर्तयति

document.documentElement.style.setProperty("--borderColor","green");

  • 1

js CSS स्थानीयचरानाम् मूल्यं सेट् करोति

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>

  • 1
  • 2
  • 3
box.style.setProperty('--color', 'deepskyblue');

  • 1

व्यावहारिक उदाहरणानि

  • CSS counter इत्यस्य साहाय्येन पृष्ठे CSS चरस्य मूल्यं प्रदर्शयन्तु
/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}

  • 1
  • 2
  • 3
  • 4
  • 5

प्रगति पट्टी

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121007837

बहुस्थानेषु प्रयुक्तानि svg चित्राणि

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

प्रभावं पश्यन्तु https://demo.cssworld.cn/new/8/1-3.php

बटन क्लिक् प्रभावः

प्रभावं पश्यन्तु https://demo.cssworld.cn/नव/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

कार्यान्वयन सिद्धान्त

  • –open:;, इत्यस्य पुरतः अवकाशः अस्ति, अर्थात् –open विशेषणमूल्यं रिक्तस्थानम् अस्ति, यत् वाक्यार्थरूपेण मान्यं भवितुम् अर्हति ।परन्तु box-shadow तथा background इत्यादीनां CSS गुणानाम् कृते रिक्तस्थानानि अमान्यानि सन्ति अतः box-shadow तथा background इत्यादयः CSS गुणाः प्रारम्भिकमूल्यानां कृते समाधानं प्राप्नुवन्ति ।

  • :active pseudo-class इत्यस्य प्रवर्तनार्थं बटन् क्लिक् कृत्वा, CSS स्टेट्मेण्ट् –open:inherit चालितं भविष्यति वैश्विक CSS कीवर्डः CSS कस्टम् एट्रिब्यूट् मूल्यरूपेण अमान्यः भवितुमर्हति, अतः var() फंक्शन् बैकअप CSS एट्रिब्यूट् इत्यस्य उपयोगं करिष्यति प्रतिपादनार्थं मूल्यम् ।

कस्टम CSS फ़ंक्शन कीवर्ड()

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121021277

attr() फंक्शन के अनुकरण करें

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121022170

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल