Css-ի ֆունկցիաները (Մաս-3)
Աջակցող ֆունկցիաներ
attr()
Ֆունկցիան օգտագործվում է ատրիբուտի արժեքը ոճավորելու համար։
attr() – ֆունկցիայի սինտաքսը՝
attr(class string, ‘’myClass-01” )
class – ատրիբուտի անվանումն է։
string – ատրիբուտի տեսակն է՝
string(տեքստ- օրինակ՝ attr(class string, “myclass01”)),
color(գույն), url(վեբ հասցե),
integer(ամբողջական թիվ – 1, 23, 142 և այլն),
number(իրական թիվ – -5, 6.7, 10e3 և այլն),
angle(անկյուն), time(ժամանակ), deg(աստիճան)։
“myClass-01“ – ատրիբուտի արժեքն է։ Նշվում է, երբ անհրաժեշտ է ատրբուտին կանխադրված արժեք սահմանել։
Հիմնականում փակագծերի մեջ նշվում է միայն ատրիբուտի անվանումը՝ attr(href) ;
.site::after {
content: attr(href);
font-size: 0.8em;
background: orange;
}
hayti
var()
var() – սահմանում է փոփոխական։
Օրինակ՝ div { –laynutyun: 100px; } – “–laynutyun” -ը փոփոխականի անվանումն է, “100px” -ը՝ դրա արժեքը։ Փոփոխականը որպես արժեք կօգտագործվի այնտեղ, որտեղ անհրաժեշտ է սահմանել “100px” -ը։
Եթե փոփոխականի հիմնական վայրում արժեքը փոխվի, ապա այն կփոխվի նաև բոլորի համար, որտեղ սահմանված է փոփոխականը։
Փոփոխականը այլ վայրում սահմանվում է var() ֆունկցիայի միջոցով՝
div {
--laynutyun: 100px;
width: var(--laynutyun);
height: var(--laynutyun);
}
Փոփոխականը հասանելի է միայն այն սելեկտորում, որտեղ այն սահմանված է։
Որպեսզի փոփոխականը հասանելի դառնա ամբողջ ոճաթղթի համար, այն պետք է տեղադրել :root պսևդոկլասում(որը հանդիսանում է <html> գլխավոր էլեմենտը)։
:root {
--narnjaguyn: orange;
}
div {
background: var(--narnjaguyn);
}
p {
color: var(--narnjaguyn);
}
button {
background-color: var(--narnjaguyn);
}
Մեկ այլ օրինակ՝
background-color: var(–narnjaguyn, red); –եթե փոփոխականի արժեքը անհասանելի է, background-color – ին կսահմանվի կարմիր(red)։
@media կանոնը չի աջակցում փոփոխականների սահմանումը։
Արգելված է օգտագործել այն հատկությունների համար, որոնց արժեքները պետք է անփոփոխ մնան։
Հնարավոր չէ դրանք սահմանել որպես սելեկտոր։
env()
env() – Ժամանակի ընթացքում սմարթֆոնները մեծ փոփոխության են ենթարկվել․ բոլոր տեսակի կոճակներն արդեն կառավարվում են էկրանց։
Օրինակ՝ Appple-ի Iphone X- ից սկսած, բոլոր սմարթֆոնները ամբողջական էկրան են, ուստի ծրագրի պարունակությունն(տեքստ, կոճակ, լրացման դաշտ և այլն) անհրաժեշտ է դասավորել այնպես, որ էլեմենտները էկրանին պատկերվեն՝ չանցնելով չերևացող մասի վրա։ Այսինքն անհրաժեշտ է սահմանել մաքուր տարածք էլեմենտների ամբողջական ցուցադրման համար՝
Եթե արտաքին սահմաններ հատկացվի, ենթադրենք Iphone X-ի էկրանի համար, ապա խնդիրը կշարունակի մնալ այլ տեսակի սմարթֆոնների դեպքում։
Այն լուծելու համար ստեղծվել են գլոբալ հատկություններ(կոչվում են «Կողմերի փոփոխականներ(переменные среды)») սմարթֆոնների էկրանների մաքուր տարածքը սահմանելու համար։ Դրանք գտնվում են բրաուզերներում։ Բրաուզերը սահմանում է մաքուր տարածք՝ հիմք վերցնելով սմարթֆոնի էկրանը։
Փոփոխականներն են՝
env(SAFE-AREA-INSET-TOP, length)
env(SAFE-AREA-INSET-RIGHT, length)
env(SAFE-AREA-INSET-BOTTOM, length)
env(SAFE-AREA-INSET-LEFT, length)
Տվյալ փոփոխականների սիմվոլները պարտադիր մեծատառ պետք է լինեն։
Սրանք, ի տարբերություն css -ի սովորական փոփոխականների, կարելի է օգտագործել նաև @media կանոնում և սահմանվում են բրաուզերների կողմից։ Աշխատում են env() ֆունկցիայի միջոցով։
Որպեսզի փոփոխականներն ակտիվանան, անհրաժեշտ է դրա մասին տեղեկացնել բրաուզերին։ Դա կատարվում է, երբ <meta> տեգում սահմանվում են հետևյալ տվյալները՝
cover-ի փոխարեն հնարավոր է սահմանել ևս երկու տարբերակ՝
cover – վեբ էջը կպատկերվի սմարթֆոնի ամբողջ էկրանով և փոփոխության կենթարկվի չորս գլոբալ փոփոխականների միջոցով։ Այս տարբերակը հարմար է, երբ սմարթֆոնի էկրանը խնդիր չի առաջացնում և վեբ էջը պատկերվում է էկրանի ամբողջ տարածությամբ։
contain – վեբ էջը կդասավորվի միայն էկրանի մաքուր տարածքում։
auto – նույնն է ինչ contain-ը։
Եթե վեբ էջը բացվելու է համակարգչի կամ նոթբուքի էկրանին, ապա չորս գլոբալ փոփոխականների արժեքը հավասար կլինի 0-ի։
Եթե էջը բացվելու է քառակուսի էկրանին, գլոբալ փոփոխականների միջոցով էկրանի համար կսհամանվի ուղղանկյուն և դրանում կպատկերվի պարունակությունը։
Գլոբալ փոփոխականների հետ կարելի է սահմանել նաև երկրորդական արժեքներ, որոնք կաշխատեն, երբ գլոբալ փոփոխականները անհասանելի լինեն բրաուզերի համար։
env(SAFE-AREA-INSET-TOP, 25px)
env(SAFE-AREA-INSET-RIGHT, 25px)
env(SAFE-AREA-INSET-BOTTOM, 25px)
env(SAFE-AREA-INSET-LEFT, 25px)
կամ առանց երկրորդական արժեքների՝
env(SAFE-AREA-INSET-TOP)
env(SAFE-AREA-INSET-RIGHT)
env(SAFE-AREA-INSET-BOTTOM)
env(SAFE-AREA-INSET-LEFT)
hayti
Վեբ կայքը բացվում է միայն բրաուզերի միջոցով, բայց այն հնարավոր է վերածել սմարթֆոնի և համակարգչի ծրագրի։
Դա նույն կայքն է, բայց ունի ծրագրի տեսք։ Այս տեխնոլոգիան կոչվում է PWA(մանրամասն կարելի է ծանոթանալ համացանցում)։
“Ծրագրի անվանումը” վերցվում է <title> էլեմենտից։
Այն հնարավոր է ծածկել Javascript կոդի միջոցով։
Եթե այն ծածկվում է, ապա վերնագիրը սահմանվում է <header> էլեմենտի միջոցով և տեղադրվում այդ վայրում env() -ի որոշակի փոփոխականներով՝
header {
position: fixed;
left: env(
titlebar-area-x,
0
); /* սահմանում է տարածություն ձախ կողմից։ */
top: env(
titlebar-area-y,
0
); /* սահմանում է տարածություն աջ կողմից։ */
width: env(
titlebar-area-width,
0
); /* սահմանում է տվյալ օբյեկտի լայնությունը։ */
height: env(
titlebar-area-height,
0
); /* սահմանում է տվյալ օբյեկտի բարձրությունը։ */
}
Ծրագրի անվանումը
Ծրագրի անվանումը
Ծրագրի պարունակությունը։
Այստեղ նույնպես հնարավոր է սահմանել երկրորդական արժեք․ այն կաշխատի եթե հիմնական փոփոխականն անհասանել է։
url()
ֆունկցիայի միջոցով սահմանվում է ռեսուրսի հասցեն՝ որևէ նկար ինտերնետում(կամ համակարգչում), վեբ տառատեսակի հասցե և այլն։
բացարձակ հասցեի(абсолютный) տեսակ՝
url(https://exmple.com/images/myImg.jpg);
հարաբերական հասցեի(относительный) տեսակներ՝
url(C:\User\images \imag01.jpg);
url(image01.jpg)– եթե ֆայլը(այս դեպքում նկարը) գտնվում է վեբ էջի հետ նույն վայրում, ապա կսահմանվի միայն դրա անվանումը:
Հասցեի համար հնարավոր է օգտագործել նաև չակերտներ, որը պարտադիր չէ՝
url(/images/myimage.png);
url(“/images/myimage.png” );
url(‘/images/myimage.png ‘ );
Ֆունկցիան կսահմանվի հետևյալ հատկությունների համար՝
background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, ,mask-image, offset-path, src :
Օրինակ՝
div { background-image: url(images/image01.jpg); }
Կօգտագործվի նաև @font-face կանոնում՝
@font-face {
font-family: "Open Sans";
src: url("/font/opensans.woff2")
format("woff2");
}
Css Grid Ֆունկցիաներ
fit-content() min-content max-content
Ենթադրենք կա <div>, որի լայնությունն ու բարձրությունը հավասար է 100px-ի։
Երբ դրանում տեղադրվի ընդարձակ տեքստ, ապա տեքստը div-ի սահմաններից դուրս կգա։
div {
width: 500px;
height: 300px;
background: orange;
}
min-content
min-content -ը սահմանելուց հետո div-ը կընդունի լայնության համար ամենափոքր չափը, իսկ բարձրությունը կորոշվի div-ի պարունակությամբ։
min-content-ը div -ում գտնում է ամենամեծ էլեմենտը և ըստ այդմ որոշում տվյալ բլոկի(div) լայնությունը։
Օրինակ տեքստում կգտնի ամենաերկար բառը, որով կորոշի լայնությունը՝
div {
width: min-content;
background: orange;
}
Հետևյալ օրինակում նկարն ամենամեծն է, ուստի չափը կորոշվի ըստ այդմ՝
min-content – ը կարող է օգտագործվել նաև grid-template-rows և grid-template-columns Grid հատկությունների հետ՝
.grid {
display: grid;
background: orange;
border: 3px solid lime;
grid-template-rows: min-content auto min-content;
}
.header {
background: grey;
border: 2px solid lime;
}
.content {
background: grey;
border: 2px solid lime;
}
.footer {
background: grey;
border: 2px solid lime;
}
hayti
HEllo World!! HEllo World!! HEllo World!!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
magna ipsum. Ut ac ullamcorper nisl. Sed hendrerit iaculis elit id
consequat. Mauris odio metus, efficitur in nibh aliquet, luctus interdum
enim. Nunc elementum
Goodby World!!
grid-template-rows: min-content auto min-content; – ընդունել է երեք արժեք div-ում գտնվող 3 դուստր div-երի համար՝ min-content, auto , min-content ։
Քանի որ երկրորդի համար սահմանված է auto տարբերակը, այն վերցրել է էկրանի ամբողջ լայնությունը. դրան հավասարվել են նաև այն երկուսը, որոնք սահմանված են min-content-ով։
max-content
max-content-ը լայնության սահմանաչափ չունի․ որքան պարունակությունն է, այնքան էլ կլինի բլոկի լայնությունը:
.container {
display: grid;
background: orange;
border: 3px solid lime;
grid-template-columns: max-content max-content 1fr;
}
.container01 {
color: white;
background: grey;
border: 3px solid lime;
}
.container02 {
color: white;
background: grey;
border: 3px solid lime;
}
.container-auto {
background: skyblue;
border: 3px solid lime;
}
hayti
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor
Lorem ipsum
Առաջին երկուսը վերցրել են այնքան տարածք, որքան անհրաժեշտ է իրենց պարունակության համար, իսկ երրորդը՝ մնացած ազատ տարածքը։
max-content-ն ունի բացասական կողմ։ Երբ ծնող էլեմենտին սահմանված է չափ, իսկ դուստրը հավասար է max-content-ի և պարունակությունն ավելին է քան ծնողին սահմանած չափը, ապա պարունակությունը դուրս կգա ծնողի սահմաններից։
#container {
border: 3px solid black;
width: 200px;
}
.item1 {
width: max-content;
border: 3px solid lime;
}
hayti
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Սրանից խուսափելու համար կսահմանվի fit-content տարբերակը։
fit-content
fit-content – արժեքի առավելությունը նրանում է, որ դուստր էլեմենտի պարունակությունը դուրս չի գա ծնողի չափերից, բայց դուստրը չի ունենա չափի մինիմալ սահմանում, ինչպես fit-content() ֆունկցիայի պարագայում։ Եթե բրաուզերի պատուհանը փոքրացնենք, բլոկի մինիմալ լայնությունը կվորոշվի min-content-ի պես․
#container {
border: 1px solid black;
width: 300px;
}
.item1 {
width: fit-content;
border: 1px solid black;
}
hayti
Lorem ipsum doloLorem ipsum dolor,
sit amet consectetur adipLorem ipsum dolor, sit amet
consectetur adipLorem ipsum dolor, sit amet consectetur
adipLorem ipsum dolor, sit amet consectetur adipvr,
sit amet consectetur adipisicing elit.
fit-content()
fit-content() – ֆունկցիայի միջոցով բլոկների համար կսահմանվի մինիմալ չափեր, որոնցից չպետք է դուրս գան դրանց պարունակությունը։
.container {
display: grid;
background: orange;
border: 2px solid red;
grid-template-columns:
fit-content(250px)
fit-content(500px) auto;
}
.container01 {
color: white;
background: grey;
border: 2px solid lime;
}
.container02 {
color: white;
background: grey;
border: 2px solid lime;
}
hayti
Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor
Lorem ipsum dolor, sit consectetur adipsit consectetur adipsit
consectetur adipsit consectetur adipisicing elit.!
Lorem
Բլոկի չափերը կարող են փոքրանալ, բայց պարունակությունը դուրս չի գա սահմանվածից։
Առաջինը 250px լայնությամբ է, երկրորդը՝ 500px, իսկ երրորդը վերցնում է ամբողջ ազատ տարածքը։
minmax()
minmax() – ֆունկցիայի միջոցով բլոկին սահմանվում է չափի դիապազոն։
Հետևյալ օրինակում առաջինը կփոքրանա մինչև 300px-ը և կմեծանա մինչև 500px-ը․ հաջորդ երկուսը հավասարապես կբաժանեն ազատ տարածքը իրար մեջ։
.container {
display: grid;
background: white;
border: 2px solid red;
grid-template-columns: minmax(300px, 500px) 1fr 1fr;
}
.container01 {
color: white;
background: orange;
margin: 5px;
border: 2px solid lime;
}
.container02 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container-auto {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
hayti
Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor
Lorem ipsum dolor, sit consectetur adipsit consectetur adipsit
consectetur adipsit consectetur adipisicing elit.!
Lorem
Ենթադրենք էկրանի լայնությունը 1200px է․ եթե անհրաժեշտ է այն բաժանել 6 հավասար բլոկների միջև, ապա կսահմանվի 1fr-ը բլոկների ընդհանուր կոնտեյներում և այն ավտոմատ կբաժանի բլոկները վեց հավասար մասերի՝ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr :
Հնարավոր է ունենալ տարբեր արժեքներով fr-ներ՝ grid-template-columns: 2.5fr 1fr 1.2fr 3fr 1.1fr 1fr ։ Հաշվարկը կատարվում է հետևյալ կերպ՝ գումարվում են բոլոր fr-ները՝ ընդհանուր՝ 9.8fr: Եթե էկրանի լայնությունը հավասար է 1200px-ի, ապա առաջին fr-ը կզբաղեցնի՝ 2.5fr/9fr*1200px = 333px-տարածք և այլն:
fr-ն օգտագործվում է միայն Css Grid -ում:
minmax() ֆունկցիայում fr-ը սահմանվել է միայն երկրորդ արժեքում՝ max-ի համար։ Առաջին բլոկը կփոքրանա մինչև 300px լայնության։ Երբ բրաուզերի էկրանը լայնանա և fr-ով նշված մնացած բլոկների լայնությունը 300px-ից ավելին դառնա, ապա առաջին բլոկը(որի համար որպես max նշված է 1fr-ը) կհավասարվի մնացած fr-ով նշված բլոկների չափին․
.container {
display: grid;
background: white;
border: 2px solid red;
grid-template-columns: minmax(300px, 1fr) 1fr 1fr;
}
.container01 {
color: white;
background: orange;
margin: 5px;
border: 2px solid lime;
}
.container02 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container-auto {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
Այստեղ հնարավոր է օգտագործել նաև min-content, max-content և auto արժեքները։
Եթե ֆունկցիան հավասար է՝ minmax( 100px, auto), առաջին բլոկը կփոքրանա մինչև 100px լայնության․ auto-ի դեպքում կլայնանա max-content -ի պես։
Եթե ֆունկցիան հավասար է՝ minmax( auto, 200px), առաջին բլոկը կփոքրանա որոշակի չափով և կլայնանա մինչև 200px-ը։
Երբ ֆունկցիան հավասար է՝ minmax( auto, auto)-ի, ապա կլինի հետևյալ արդյունքը՝
վեկրջին երկու բլոկների լայնությունը համապատասխանում է պարունակության մեջ ամենափոքր չափին։ Առաջին բլոկը վերցրել է մնացած ազատ տարածքը։
repeat()
repeat() – ֆունկցիան օգնության է հասնում, երբ մեկ կոնտեյներում կան բազմաթիվ բլոկներ, որոնք պետք է ունենան հավասար լայնություն։
Բրաուզերի էկրանի փոփոխման հետ բլոկները փոխում են իրենց վայրը։ Եթե բոլորը կարող են տեղավորվել էկրանի լայնության մեջ, ապա կդասավորվեն իրար կողքի։
Եթե էկրանը փոքրանա, դրանք կդասավորվեն ձախից աջ և վերևից ներքև հերթականությամբ։
Այս ամենին հնարավոր է հասնել մի քանի հատկություն սահմանելով՝
.container {
display: grid;
background: white;
border: 2px solid red;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.container01 {
color: white;
background: orange;
margin: 5px;
border: 2px solid lime;
}
.container02 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container03 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container04 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container05 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container06 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container07 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
.container08 {
color: white;
background: grey;
margin: 5px;
border: 2px solid lime;
}
hayti
Lorem ipsum dolor ipsum dolor ipsum consectetur adipsit consectetur
adipsit consec consectetur adipsit consectetur adipsit consec
consectetur adipsit consectetur adipsit consec consectetur adipsit
consectetur adipsit consecdolor ipsum dolor
Lorem ipsum dolor, sit consectetur adipsit consectetur adipsit
consectetur adipsit consectetur adipisicing elit.!
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
repeat() ֆունկցիայի միջոցով ամեն բլոկի համար սահմանվում է չափ․ այն սահմանվում է մեկ անգամ և վերաբերում է բոլորին։
Ընդունում է երկու արժեք՝
auto-fit – պատասխանատու է բլոկների քանակի և դրանց դասավորման համար։
երկրորդ արժեքը վերաբերում է յուրաքանչյուր բլոկին(minmax(200px, 1fr))։
repeat() -ի միջոցով կատարվում է քանակի և չափի կրկնություն և դասավորվում ձախից աջ, վերևից ներքև հերթականությամբ։
minmax(200px, 1fr) -ամեն բլոկ կփոքրանա մինչև 200px․ բոլորը միասին կլայնանան այնքան, մինչև էկրանի վրա այլ բլոկի համար 200px լայնությամբ տարածք զբաղեցվի։
Հնարավոր է ունենալ այլ տարբերակներ՝
grid-template-columns: repeat(8, 8em) – անհրաժեշտ է սահմանել 8 բլոկ, որոնցից յուրաքանչյուրը կունենա 8em լայնություն։
grid-template-columns: repeat(2, 7em 8em) – անհրաժեշտ է սահմանել 4 բլոկ, որտեղ երկու անգամ կկրկնվեն 7em և 8em լայնության բլոկներ։
grid-template-columns: 6em repeat(3, 5em) – առաջին բլոկը կունենա 6em լայնություն, իսկ մնացած 3-ը՝ 5em լայնություն։
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) -ը հնարավոր է սահմանել նաև այլ կերպ՝
grid-template-columns: repeat(8, minmax(200px, 1fr))
Արդյունքը կլինի հետևյալը՝