Programimi në Ueb nga Ana e Klientit: CSS dhe Arti i Prezantimit Digjital

Një përmbledhje gjithëpërfshirëse e koncepteve kryesore të ligjëratave mbi CSS, duke përfshirë sintaksën, selektorët, modelin box, flexbox, grid, pozicionimin, mediat responzive dhe zgjidhjen e konflikteve në shfletues.

Çfarë është CSS dhe cili është roli i saj kryesor në zhvillimin e uebit?

CSS (Cascading Style Sheets) është një gjuhë për përshkrimin e paraqitjes vizuale të dokumenteve HTML, e cila kontrollon tipografinë, ngjyrat, hapësirat, kufijtë, sfondet dhe pozicionimin e elementeve, duke ndarë strukturën nga dizajni vizual.

Kush e propozoi për herë të parë CSS dhe në cilin vit?

CSS u propozua për herë të parë nga Håkon Wium Lie në tetor të vitit 1996, gjatë kohës kur ai punonte së bashku me Tim Berners-Lee në CERN.

Cilat janë katër përfitimet kryesore të përdorimit të CSS në zhvillimin e uebit?

1. Ripërdorimi dhe Konsistenca, 2. Mirëmbajtja e Lehtësuar, 3. Performanca dhe Shpejtësia, 4. Dizajni i Përshtatshëm (Responsive).

Cilat janë pesë hapat e procesit të shfletuesit për interpretimin dhe paraqitjen e CSS (rendering pipeline)?

1. Ngarkimi i HTML, 2. Krijimi i DOM (Document Object Model), 3. Ngarkimi i burimeve (CSS, imazhe, video), 4. Analizimi i CSS dhe Pema e Përshkruar (Render Tree / Styled Tree), 5. Layout, Paint dhe shfaqja e faqes në ekran.

Nga cilat elemente përbëhet struktura anatomike e një rregulli CSS?

Një rregull CSS përbëhet nga një selektor (që identifikon elementin HTML që stilohet) dhe një bllok deklarimesh brenda kllapave gjarpërore, i cili përmban çifte të përbëra nga veti (property) dhe vlerë (value) të ndara me pikëpresje.

Cilat janë tri nivelet kryesore të zbatimit të CSS-it dhe sintaksa e tyre përkatëse?

1. Inline CSS: vendoset me atributin style brenda një tagu të caktuar; 2. Internal CSS: vendoset brenda tagut

Çfarë funksioni ka metoda @import në CSS dhe cila është rregulla strikte e vendosjes së saj?

@import përdoret brenda një skedari CSS për të importuar një skedar tjetër CSS (p.sh. @import url("colors.css");) dhe duhet të shkruhet gjithmonë në fillim fare të skedarit CSS, përpara çdo rregulli tjetër stili.

Cilat janë vlerat e specifitetit (specificity) për selektorët Universal, Elementar, të Klasës, ID dhe Stilit Inline?

Selektori Universal (*) ka specifitet $0$, Selektori Elementar/Tag ka $1$, Selektori i Klasës (.class) dhe Atributit ka $10$, Selektori ID (#id) ka $100$, dhe Stili Inline ka $1000$.

Si dallohet selektori pasardhës (descendant) nga selektori fëmijë (child)?

Selektori pasardhës ndahet me hapësirë (p.sh. ul em) dhe përzgjedh elementin në çfarëdo thellësie brenda prindit, ndërsa selektori fëmijë përdor simbolin > (p.sh. div > p) dhe përzgjedh ekskluzivisht vetëm fëmijët e drejtpërdrejtë.

Cili është dallimi në përzgjedhje ndërmjet fqinjit të drejtpërdrejtë (+) dhe fqinjëve të përgjithshëm (~)?

Fqinji i drejtpërdrejtë (div + p) shënjestron vetëm elementin e parë p që ndodhet menjëherë pas div-it, ndërsa fqinjët e përgjithshëm (div ~ p) shënjestrojnë të gjithë elementet p fqinjë që ndjekin div-in në të njëjtin nivel prindi.

Si dallohen pseudo-klasat nga pseudo-elementet në CSS dhe si shënohen ato në CSS3?

Pseudo-klasat përdorin një dy-pikësh të vetëm (:) dhe përfaqësojnë gjendje të veçanta të një elementi (si p.sh. :hover, :visited), ndërsa pseudo-elementet përdorin dy dy-pikësha (::) dhe stilojnë pjesë të caktuara të përmbajtjes (si p.sh. ::first-letter, ::first-line, ::marker).

Cilat janë katër shtresat e Modelit Box (Box Model) nga brenda jashtë?

1. Content Area (zona e përmbajtjes me width x height), 2. Padding (hapësira e brendshme transparente rreth përmbajtjes), 3. Border (kufiri/korniza që rrethon padding-un), 4. Margin (hapësira e jashtme që ndan elementin nga fqinjtë).

Cili është rregulli mnemoteknik TRBL (Trouble) gjatë përcaktimit të katër vlerave të kufijve, margjinave apo padding-ut?

Vlerat aplikohen sipas drejtimit të akrepave të orës: 1. Top (lart), 2. Right (djathtas), 3. Bottom (poshtë), 4. Left (majtas).

Si ndikon vetia box-sizing: border-box krahasuar me vlerën standarde content-box?

Në content-box, padding dhe border i shtohen gjerësisë së përcaktuar të kutisë; në border-box, padding dhe border përfshihen brenda vlerave të width dhe height, duke ruajtur madhësinë e deklaruar të elementit.

Çfarë paraqet fenomeni i 'Margin Collapsing' (shembja e margjinave) në CSS?

Është sjellja ku margjinat vertikale ngjitur të dy ose më shumë kutive të njëpasnjëshme bashkohen në një margjinë të vetme të përbashkët, madhësia e së cilës barazohet me margjinën më të madhe ndërmjet tyre.

Cilat janë katër vlerat kryesore të vetisë overflow dhe si vepron secila prej tyre?

1. visible: përmbajtja del jashtë kutisë dhe mbivendoset (parazgjedhur); 2. hidden: përmbajtja që del jashtë pritet automatikisht; 3. scroll: shfaq gjithmonë shirita lëvizës; 4. auto: shfaq shiritin e scroll-it vetëm kur përmbajtja tejkalon hapësirën.

Cili është dallimi thelbësor midis modeleve të paraqitjes Flexbox dhe CSS Grid?

Flexbox është një model një-dimensional (1D) që vendos elementet vetëm në rresht ose vetëm në kolonë, ndërsa CSS Grid është një model dy-dimensional (2D) që kontrollon njëkohësisht rreshtat dhe kolonat.

Çfarë përfaqëson njësia fr (Fraction) në CSS Grid?

Njësia fr përfaqëson një fraksion ose pjesë proporcionale të hapësirës së lirë të mbetur në Grid pasi zbriten kolonat me gjerësi fikse dhe hapësirat e ndërmjetme (gap).

Si deklarohen dhe si thirren Custom Properties (variablat) në CSS?

Deklarohen globalisht brenda pseudo-klasës :root duke përdorur parashtesën me dy viza (p.sh. --primary-color: #1d4ed8;) dhe thirren në komponentë përmes funksionit var() (p.sh. color: var(--primary-color);).

Cili është dallimi në strukturën e faqes midis display: none dhe visibility: hidden?

display: none e heq plotësisht elementin nga rrjedha e dokumentit dhe nuk lë hapësirë bosh për të; visibility: hidden e bën elementin të padukshëm, por ruan plotësisht hapësirën e tij fizike në faqe.

Cilat janë dallimet midis katër vlerave kryesore të vetisë position (static, relative, absolute, fixed)?

static është rrjedha normale e dokumentit; relative zhvendos elementin nga pozicioni fillestar duke ruajtur hapësirën e tij origjinale; absolute e heq nga rrjedha dhe e pozicionon ndaj paraardhësit më të afërt të pozicionuar; fixed e fikson në dritaren e shfletuesit pavarësisht shfletimit të faqes.

Cilat janë tri pikëndarjet (breakpoints) për Media Queries dhe numri përkatës i kolonave në skemën e CampusHub?

1. Mobile (deri në $520\,\text{px}$): 1 kolonë (1fr); 2. Tablet ($521\,\text{px} - 800\,\text{px}$): 2 kolona (repeat(2, 1fr)); 3. Desktop (mbi $800\,\text{px}$): 3 kolona (repeat(3, 1fr)).

Cilat veti të CSS-it trashëgohen (inherited) nga prindi te fëmijët dhe cilat jo?

Trashëgohen vetitë e fontit, ngjyrës, listave dhe tekstit (font, color, list, text); nuk trashëgohen vetitë e strukturës, dimensioneve, kufijve, sfondeve dhe hapësirave (layout, sizing, border, background, spacing).

Çfarë roli ka direktiva !important në një deklaratë CSS?

!important i jep përparësi maksimale një rregulli stili CSS, duke mbizotëruar mbi çdo rregull tjetër konfliktuar, pavarësisht renditjes së shkrimit apo peshës së specifitetit të selektorëve.

Në kodin me rregullat: .box { color: red; } #main .box { color: yellow; } .box[disabled] { color: blue !important; }, cila ngjyrë zbatohet te elementi dhe pse?

Zbatohet ngjyra e kaltër (blue), sepse rregulli .box[disabled] shoqërohet me direktivën !important, e cila anashkalon dhe mbizotëron mbi specificitetin më të lartë të selektorit #main .box.

A ka kuptim semantik përdorimi i atributit disabled tek elementi

në HTML?

Jo, sepse atributi disabled ka kuptim semantik dhe funksional vetëm për elementet interaktive të formularëve (si input, button, select), ndërsa te tagu

mund të shërbejë vetëm teknikisht si atribut i thjeshtë për shënjestrim me selektorë atributesh në CSS.

Çfarë funksioni ofron media query @media (prefers-reduced-motion: reduce)?

Ofron qasueshmëri duke zbuluar nëse përdoruesi ka kërkuar në nivel sistemi minimizimin e lëvizjeve, duke mundësuar çaktivizimin e animacioneve @keyframes për të parandaluar shqetësime vizuale.