CSS-CONTENT
content
content – ::after և ::before պսևդոէլեմենտների միջոցով էլեմենտի պարունակության սկզբում կամ վերջում ավելացվում է content-ում նշվածը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | ::before և ::after պսևդոէլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներ, որ ընդունում է content-ը՝
teqst – տեքստը վերցվում է չակերտների մեջ( “…” կամ ‘…’ )։ Հատուկ սիմվոլներ տեղադրելու համար թույլատրելի է օգտագործել Unicode կոդավորման տարբերակը։ Օրինակ՝content: “ Hello ” ; :
attr(atributi anvanumy) – ֆունկցիան վերադարձնում է նշված ատրիբուտի տեքստը։ Օրինակ որևէ հղման դեպքում՝ <a href=”www.hayti.am”> , այն որպես տեքստ հնարավոր է ավելացնել էլեմենտի պարունակության սկզբում կամ վերջում՝ a::after { content: attr(href) } :
open-quote – տեքստի ամենասկզբում տեղադրում է բացվող փակագծի այն տեսակը, որը նախորոք սահմանված է եղել quotes հատկության մեջ։
close-quote – տեքստի ամենավերջում տեղադրում է փակվող փակագծի այն տեսակը, որը նախորոք սահմանված է եղել quotes հատկության մեջ։
no-open-quote – արգելում է բացվող փակագծի ավելացումը։
no-close-quote – արգելում է փակվող փակագծի ավելացումը։
body {
padding: 10px;
font-size: 20px;
}
.Div01 {
width: 400px;
margin: auto;
}
q {
quotes: '"' '"' "'" "'" '"' '"';
}
q::before {
content: open-quote;
color: brown;
font-size: 25px;
}
q::after {
content: close-quote;
color: brown;
font-size: 25px;
}
.noquotes::before {
content: no-open-quote;
}
.noquotes::after {
content: no-close-quote;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="Div01">
<h2>no-open-quote/no-close-quote-ի համար օրինակ՝</h2>
<p>
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<q>Aenean vitae sodales neque, et faucibus orci.
<q class="noquotes">Quisque sed aliquet mi.</q> Consequatur in sequi
pariatur accusamus.</q>
Vestibulum ante ipsum primis in
</q>
</p>
</div>
</body>
</html>
quotes հատկության մեջ նշված են երեք զույգ չակերտներ։ Բրաուզերը հերթականությամբ բոլոր <q> էլեմենտների պարունակության սկզբում և վերջում կտեղադրի չակերտները։
Երրորդ <q>-ի համար սահմանված է no-open/close-quote արժեքները, ուստի երրորդում նշված զույգ չակերտները, որը պատկանում է երրորդ <q>-ին, չի տեղադրվել։
url() – սահմանվում է բացարձակ կամ հարաբերական հասցեի տեսակ, որը տեղադրվող օբյեկտի հասցեն է։ Եթե նշված ֆայլը բրաուզերը չկարողանա ցուցադրել, ապա այն կանտեսվի։
q::before {
content: url(icon-content.jpg);
}
q::after {
content: url(icon-content.jpg);
}
counter() – Տես՝ Css-ի ֆունկցիաներ(Մաս-2) բաժնում։ Այն ցուցադրելու է հաշվիչի արժեքը, որը սահմանված է counter-reset փոփոխականում։
none – ոչինիչ չի ավելացնում։
normal – այլ css հատկություններում նույնպես օգտագործվում է։ Այստեղ այն հավասար է none-ի՝ content-ը կթողնի դատարկ։
counter-reset counter-increment counter()
counter() ֆունկցիան ցուցադրում է պարզ թվային փոփոխականի(x = 10, « դա x տարեկան է ») արժեքը։
Եթե անհրաժեշտ է հաշվիչ նույնատիպ էլեմենտերը հաշվելու համար, ապա այն բաղկացած է երեք մասից`
1. counter-reset – վայրն է, որում պահպանվում է հաշվիչի արդյունքը։ counter-reset -ը սահմանելու է փոփոխական, որում կպահպանվի ամբողջական թիվ՝ հաշվիչի արդյունքը։ Սկզբնական արժեքը հավասար է 0-ի։
2. counter-increment – հաշվիչն է, որը կհաշվի նույնատիպ էլեմենտների քանակը տվյալ վեբ էջում։
3. counter() – ֆունկցիան է, որը ցուցադրելու է հաշվիչի արդյունքը։ Սրանում պետք է նշվի փոփոխականի անվանումը։ Ֆունկցիան պետք է տեղադրել content հատկության մեջ, որն էլ կցուցադրի հաշվիչի արդյունքը։
Տես՝ Css-ի ֆունկցիաներ(Մաս-2) բաժնում։
Այսպիսով՝
body {
counter-reset: hashvich;
/* Սահմանվել է փոփոխական հաշվիչի համար՝ « hashvich » անվանմամբ */
}
h2::before {
counter-increment: hashvich;
/* հաշվիչը ամեն h2 էլեմենտի դեպքում 1-ով գումարվում է։ */
content: "Համար " counter(hashvich) " - ";
/* content-ը ::before պսևդոէլեմենտի միջոցով իր պարունակությունը
ցուցադրելու է ամեն h2 տողից առաջ։
counter()-ի միջոցով հաշվիչի արժեքը ավելանում է դրան։*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
<h2>խաղացողը։</h2>
</body>
</html>
counter-reset -ի հակիրճ տվյալները՝
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none – Արգելում է հաշվիչի աշխատանքը տվյալ սելեկտորի համար՝դրանք չեն ենթարկվի հաշվարկի։
popokhakan – փոփոխականի անվանումն է։ Կարելի է սահմանել մեկից ավելի՝ իրարից պրոբելով առանձնացված։
Որքան անվանում նշվի, այդքան առանձին փոփոխականներ կլինեն։ Փոփոխականնների վայրը կարևոր է՝ դրանք սահմանվել են նույն սելեկտորում մեկ counter-reset-ում, թե տարբեր սելեկտորներում։
voreveTiv – սահմանում է փոփոխականի(-երի) սկզբնական արժեքը։ Կանխադրված է 0-ն։
Օրինակ՝
li {
list-style-type: none; /*ցուցակն ավտոմատ հաշվարկում է իր բոլոր կետերը, ուստի պետք է այն անջատվի։*/
}
ol {
counter-reset: list1; /* այս մասը վերաբերում է ամբողջ html ցուցակին */
}
ol li:before {
counter-increment: list1; /* list1 փոփոխականն իր արժեքը կփոխի՝ կհաշվի միայն
հիմնական ol-ի անմիջական դուստր li էլեմենտները։
Այսպիսով կունենանք միայն 2 խումբ ցուցակ(2 հիմնական li) գլխավոր ցուցակի մեջ։ */
content: counter(list1) ". ";
}
ol ol {
counter-reset: list2; /* սա վերաբերում է խմբերի երկու ենթախմբերին առանձին(2 ol-երին)։ */
}
ol ol li:before {
counter-increment: list2; /*իսկ սա՝ ենթախմբերի արժեքների ցիկլն է*/
content: counter(list1) "." counter(list2) ". ";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ol> <!-- ամբողջ html ցուցակը -->
<li>-ին խումբ <!-- հիմնական ցուցակի առաջին խումբը -->
<ol> <!-- առաջին ենթախումբը -->
<li>արժեք</li> <!-- արժեքները -->
<li>արժեք</li>
<li>արժեք</li>
</ol>
</li>
<li> -րդ խումբ <!-- հիմնական ցուցակի երկրորդ խումբը -->
<ol> <!-- երկրորդ ենթախումբը -->
<li>արժեք</li> <!-- արժեքները -->
<li>արժեք</li>
</ol>
</li>
</ol>
</body>
</html>
counter-reset-ը՝ փոփոխականները գրված են առանձին վայրերում։
Երկու խմբերը(li) անմիջական դուստրերն են հիմնական ցուցակի համար(ol), ուստի list1-ի արժեքը կլինի 2:
Ենթախմբերը իրարից առանձին են(ունեն տարբեր ծնողներ), ուստի ol ol { counter-reset: list2; }; -ը կվերաբերի երկու ենթախմբերին առանձին։ Այսպիսով list2-ը երկուսի դեպքում էլ կսկսի զրոյից։
Օրինակը՝
counter-increment -ի հակիրճ տվյալները՝
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none –արգելում է սելեկտորը հաշվարկի մեջ գումարել։
popokhakany – նշվում է մեկ կամ ավելի փոփոխականների անուններ հաշվարկի համար։ Փոփոխականների անուններն առանձնացվում են պրոբելով։
voreveTiv – սահմանում է՝ որքան պետք է գումարի փոփոխականի արժեքին։ Կանխադրված արժեքը մեկն է։ Թույլատրելի է օգտագործել դրական և բացասական ամբողջական թվեր և զրո։
Օրինակներ՝
li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
counter-increment: list;
content: counter(list) ". ";
}
Փոփոխականը կսկսի զրոից, քանի որ նախնական արժեքը -1 է։ Դրան գումարելով մեկ կստանանք 0 և այդպես շարունակ։
0, 1, 2
li { list-style-type: none; }
ol { counter-reset: list; }
li::before {
counter-increment: list 2;
content: counter(list) ". ";
}
Փոփոխականը ամեն անգամ կգումարվի երկուսով։
2, 4, 6
li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
counter-increment: list list;
content: counter(list) ". ";
}
Փոփոխականը կսկսի -1 -ով և ամեն անգամ կգումարվի 1 + 1 -ով։ Սկզբում՝ ” -1+1+1=1 ” և այլն՝ 1, 3, 5․․․
li { list-style-type: none; }
ol { counter-reset: list 9; }
li::before {
counter-increment: list;
content: counter(list) ". ";
}
Փոփոխականի սկզբնական արժեքը կլինի 9 :
10, 11, 12
quotes
quotes –նախադասությունների համար ավելացնում է չակերտներ։
<q> էլեմենտներում չակերտները կտեղադրվեն ավտոմատ՝ ըստ quotes-ում նշված չակերտի տեսակի։
Այլ էլեմենտում նշված տեքստին չակերտներ ավելացնելու համար կօգտագործվի ::before ::after պսևդոէլեմենտները՝ content -ում նշելով հատուկ բառեր՝ open-quote, close-quote․ առաջինը կվերաբերի quotes-ում նշված առաջին սիմվոլին, երկրորդը՝ երկրորդին։ no-open-quote, no close-quote արժեքները կարգելեն ավելացնել չակերտները տեքստի համար։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | Կախված է բրաուզերի կարգավորումներից, ինչպես նաև համակարգչի օպերացիոն համակարգից։ |
| Ժառանգվում են | Այո |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Այս հատկությունը որպես արժեք կարող է ընդունել սիմվոլը կամ դրա յունիկոդը՝
| Սիմվոլը | Unicode |
| « | \0022 |
| ‘ | \0027 |
| « | \00ab |
| » | \00bb |
| ‘ | \2018 |
| ’ | \2019 |
| “ | \201c |
| ” | \201d |
none – չակերտ չի ավելացվում։
q {
quotes: "\00ab" "\00bb";
color: red;
}
.p01 {
quotes: "\201c" "\201c";
}
.p01::before {
content: open-quote;
color: brown;
font-size: 30px;
}
.p01::after {
content: close-quote;
color: brown;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>quotes</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Lorem ipsumա dolor sit amet, <q>consectetur adipiscing elit.</q> Nam
maximus.
</p>
<p class="p01">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
column-count
column-count – էլեմենտի պարունակությունը բաժանում է սահմանված քանակի սյունակների։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
auto – սյունակների քանակը սահմանվում է ավտոմատ։
քանակը – զրոյից մեծ ամբողջական թիվ, որը կսահմանի սյունակների քանակը։
div {
column-count: 2;
}
column-fill
column-fill – սահմանում է՝ էլեմենտի պարունակությունը ինչպես բաժանել սյունակների։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | balance |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է սյունակների բաժանված էլեմենտի հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
auto – սյունկների մեջ պարունակությունը չի բաժանվում հավասարաչափ, այլ յուրաքանչյուրում զբաղեցնում է այնքան, որքան հնարավոր է։
balance – սյունակների մեջ պարունակությունը կբաժանվի հավասարաչափ։ Էջը տպելու դեպքում կվերաբերի միայն վերջին էջին։
balance-all – սյունակների մեջ պարունակությունը կբաժանվի հավասարաչափ։ Էջը տպելու դեպքում կվերաբերի բոլոր էջերին։ Չի աջակցվում բրաուզերների կողմից։
div {
column-count: 3;
column-fill: balance;
height: 300px;
border: 2px solid black;
}
div {
column-count: 3;
column-fill: auto;
height: 300px;
border: 2px solid black;
}
column-gap
column-gap – սահմանում է սյունակների միջև ընկած հեռավորությունը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բլոկ, flex, grid տեսակի էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
normal – սյունակների միջև ընկած հեռավորությունը սահմանվում է բրաուզերի կողմից։
արժեքՉափմանՄիավորով – որևէ արժեք չափման միավորներից մեկով։
div {
column-count: 3;
column-fill: balance;
column-gap: 100px;
height: 300px;
border: 2px solid black;
;
}
column-rule column-rule-width column-rule-style column-rule-color
սահմանում է ուղահայաց գծեր սյունակների միջև։ column-rule -ը ունիվերսալ հատկություն է մնացած երեքի համար՝ գծերի լայնությունը(column-rule-width), գծերի ոճը(column-rule-style) և գծերի գույնը(column-rule-color):
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | column-rule-width: medium column-rule-style: none column-rule-color: ըստ տեքստի գույնի |
| Ժառանգվում են | column-rule-width: Ոչ column-rule-style: Ոչ column-rule-color: Ոչ |
| Կիրառվում են | Կիրառվում է սյունակների բաժանված էլեմենտի հետ։ |
| Ենթարկվում է անիմացիայի | column-rule-width: Այո column-rule-style: Ոչ column-rule-color: Այո |
column-rule-width – ի արժեքներն են՝
thin – համապատասխանում է 2px-ին։
medium – համապատասխանում է 4px-ին։
thick – համապատասխանում է 6px-ին։
Կամ չափման միավորներից մեկով։
column-rule-style – ի արժեքներն են՝
none – գծերը չեն ցուցադրվում՝ անջատվում է տվյալ հատկության արդյունքը։
hidden – գծերն ուղղակի թաքցվում են։
Ոճի տեսակներն են՝
column-rule-color –ի արժեքը սահմանվում է գույնի ցանկացած ֆորմատով։
div {
column-count: 3;
column-fill: balance;
column-gap: 50px;
column-rule: 5px dashed orange;
height: 300px;
border: 2px solid black;
;
}
column-span
column-span – սահմանում է՝ ինչպես ցուցադրել սյունակներից դուրս գտնվող էլեմենտը՝ զբաղեցնի բոլոր սյունակների ընդհանուր լայնությամբ տարածք, թե բավարարվի միայն մեկով։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բլոկ տեսակի էլեմենտների հետ, նաև նրանց հետ, որոնք հավասար են display: inline-block – ի։ Չի կիրառվում <table>-ների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none – էլեմենտը զբաղեցնում է միայն մեկ սյունակի լայնությամբ տարածք։
all – էլէմենտը զբաղեցնում է բոլոր սյունակների ընդհանուր լայնությամբ տարածք։
div {
column-count: 3;
column-fill: balance;
column-gap: 50px;
column-rule: 5px dashed orange;
height: 300px;
border: 2px solid black;
;
}
div h2 {
column-span: none;
}
<body>
<div>
<h2>The title of this content</h2>
Lorem ipsum dolor sit amet consectetur adipisicing …… sint quasi esse! Et!
</div>
</body>
div {
column-count: 3;
column-fill: balance;
column-gap: 50px;
column-rule: 5px dashed orange;
height: 300px;
border: 2px solid black;
;
}
div h2 {
column-span: all;
}
column-width
column-width – սահմանում է սյունակների լայնությունը։ Դրանք չեն կարող սահմանված չափից փոքր լինել, բայց կարող են լայնանալ՝ ըստ բրաուզերի պատուհանի։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բլոկ տեսակի էլեմենտների հետ, նաև նրանց, որոնք հավասար են display: inline-block – ի։ Չի կիրառվում <table>-ների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
չափմանՄիավարովԱրժեք – որևէ արժեք չափման միավորներից մեկով։
auto – սյունակների լայնությունը սահմանվում է ավտոմատ՝ հաշվի առնելով column-count, column-gap հատկությունները։
div {
column-count: 3;
column-fill: balance;
column-gap: 50px;
column-rule: 5px dashed orange;
column-width: 300px;
height: 400px;
border: 2px solid black;
;
}
div h2 {
column-span: all;
}
columns
columns – ունիվերսալ հատկություն է՝ սահմանում է երկու արժեք՝ column-count և column-width։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բլոկ տեսակի էլեմենտների հետ, նաև նրանց, որոնք հավասար են display: inline-block – ի։ Չի կիրառվում <table>-ների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
column-count-ի և column-width-ի արժեքներն են, որտեղ հերթականությունը կարևոր չէ։
content-visibility contain-intrinsic-size
content-visibility-ն սահմանում է բրաուզերին՝ էլեմենտի պարունակությունն անմիջապե՞ս ավելացվի վեբ էջում՝ հաշվի չառնելով նրանում օգտվողի գտնվելու դիրքը։
Երբ բրաուզերը ներբեռնում է վեբ էջի ամբողջ պարունակությունը և ցուցադրում այն, content-visibility հատկության միջոցով սահմանումվում է՝ չցուցադրել տվյալ հատվածի պարունակությունը մինչև այն անհրաժեշտ չլինի՝ մինչև վեբ էջի այդ հատվածը չհայտնվի բրաուզերի տեսադաշտում։
Այս հատկության օգտագործման հիմնական պատճառը վեբ էջի ցուցադրման համար լրացուցիչ արագություն ձեռք բերելն է։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | visible |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բլոկ տեսակի էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
hidden – էլեմենտը չեղարկում է իր պարունակությունը և դառնում է անհասանելի։ Դա նույնն է, երբ պարունակության համար օգտագործվի display: none հատկությունը։
Իրականում էլեմենտի պարունակությունը պահպանվում է քեշում։ Javascript-ի միջոցով ցուցադրելու դեպքում այն նորից չի ներբեռնվի սերվերից, այլ կվերցվի բրաուզերի քեշից և կցուցադրվի ավելի արագ։
visible – էլեմենտը ցուցադրվում է սովորականի պես։
auto – էլեմենտը հասանելի է, իսկ պարունակությունը քեշավորված է և կցուցադրվի, երբ տվյալ հատվածը հայտնվի բրաուզերի տեսադաշտում։
content-visibility: hidden-ի դեպքում՝
.div-01 {
padding: 20px;
width: 820px;
background-color: green;
}
.divsss-01 {
width: 760px;
height: 800px;
padding: 20px;
border: 2px solid black;
background-color: orange;
}
.div-02 {
margin-top: 50px;
padding: 20px;
width: 820px;
background-color: green;
content-visibility: hidden;
}
.divsss-02 {
width: 760px;
height: 800px;
padding: 20px;
border: 2px solid black;
background-color: rgb(0, 107, 131);
/* blue */
}
<body>
<div class="div-01">
<div class="divsss-01">
<img decoding="async" src="forest-2.jpg" alt="" />
<br />
<p>Lorem ipsum dolor sit amet consectetur ․․․․․․․․․․ debitis.</p>
</div>
<br />
<br />
<div class="divsss-01">
<img decoding="async" src="forest.jpg" alt="" />
<br />
<p>Lorem ipsum dolor sit amet consectetur ․․․․․․․․․ debitis.</p>
</div>
<br />
<br />
<div class="divsss-01">․ ․ ․ ․</div>
<div class="div-02">
<div class="divsss-02">
<img decoding="async" src="forest-2.jpg" alt="" />
<br />
<p>Lorem ipsum dolor sit amet consectetur ․․․․․․․․․․․․ debitis.</p>
</div>
</div>
․ ․ ․ ․
</div>
</body>
content-visibility: visible-ի դեպքում՝
.div-02 {
margin-top: 50px;
padding: 20px;
width: 820px;
background-color: green;
content-visibility: visible;
}
content-visibility: auto-ի դեպքում՝
.div-02 {
margin-top: 50px;
padding: 20px;
width: 820px;
background-color: green;
content-visibility: auto;
}
auto-ի դեպքում ընդհանուր էջի տարածությունը մեծանում է միայն, երբ էլեմենտը հայտնվում է բրաուզերի տեսադաշտում, բայց մինչ այդ դրա համար նախատեսված տարածքը հավասար է 0-ի։
Հնարավոր է նախապես սահմանել էլեմենտի չափը վեբ էջում և բրաուզերին թողնել միայն դրա պարունակույթունը ճիշտ պահին ցուցադրելու խնդիրը։
Դրան նախնական չափ սահմանելու համար կօգտագործվի contain-intrinsic-size հատկությունը։
contain-intrinsic-size- ի դեպքում՝
.div-02 {
margin-top: 50px;
padding: 20px;
width: 820px;
background-color: green;
content-visibility: auto;
contain-intrinsic-size։ 4000px;
}
Armenian 
Russian