CSS

Question 1

Adaptive Design vs Responsive Design

Answer 1

Adaptive Design - Koristi unapred definisane veličine ekrana i prilagođava dizajn specifično tim veličinama. Kreira se više statičkih dizajna za različite uređaje (media queries)
Responsive Design - Atuomtaski prilagođava sadržaj bilo kojoj veličini ekrana. Kreira se jedan dizajn koji se prilagođava svim uređajima (flex, em, %…)

Responsive Design jeste fleksibilniji, ali je adaptive design precizniji.

Question 2

Inline elements vs Block elements

Kako Flexbox utiče na inline i block elemente?

Answer 2

Inline elementi zauzimaju onoliko prostora koliko je potrebno za njihov sadržaj, dok block elementi zauzimaju celu širinu roditeljskog elementa i počinju u novom redu.
Inline elementi mogu sadržati samo tekst ili druge inline elemente i ignorišu CSS svojstva width i height

Inline elementi:
* span
* a
* br
* input
* button

Block elementi:
* div
* p
* h1…h6
* ul, ol, li

Postoji i kombinovani tip prikaza - inline-block. Element se prikazuje u istom redu kao inline elementi, ali se ponaša kao block kada je u pitanju veličina - tj može imati width i height.

Kada postavimo element kao flex container, svi njegovi direktni potomci automatski postaju flex items. Flex items ignorišu svoj default display (inline ili block) i usvajaju ponašanje određeno od strane flex container-a

Question 3

CSS Selectors

Answer 3

CSS selektori omogućavaju da selktujemo određeni HTML element koji želimo da stilizujemo.
Basic selektori:
tip elementa, klasa, id, atirbut, *
[type=”text”] {
border: 1px solid black;
}
[type]
a[type]
[type=”someType”]
[type^=”startsWith”]
[type$=”endsWith”]
[type*=”contains”]
Relacioni selektori:
#products p (children and grandchildren)
#products > p (children)
#products + p (sibling)
#products ~ p (siblings)

Pseudo-class selektori: (elementi u određenom stanju, strukturni i za interakciju)
article: first-child
article: first-of-type
article:nth-child(odd)
:hover
:focus
:active
Pseudo-element selektori: (specifičan deo elementa)
p::after
p::before
p::first-letter

Question 4

CSS Specificity

Answer 4

Pravilo koje određuje koji stilovi će biti primenjeni na element kada se primeni više selektora sa potencijalno konfliktnim pravilima. Što je veća specifičnost selektora, to je veća šansa da će njegov stil biti primenjen.

1000 Inline
100 ID
10 class, attributes, pseudo-class
1 elements, pseudo-elements

Question 5

Pozicioniranje u CSS-u

z-index

Answer 5

Pozicioniranje određuje kako će elementi biti postavljeni na stranici u odnosu na druge elemente, roditeljski kontejner ili sam dokument.

1. Static (default) - Elementi se pozicioniraju prema normalnom toku dokumenta. Ne reaguje na svojstva top…left
2. Relative - Ostaje u normalnom toku, ali se može pomeriti pomoću svojstava top, right, bottom i left. Relativno u odnosu na njegovu statičku poziciju
3. Absolute - Element se uklanja iz normalnog toka dokumenta i pozicionira u odnosu na najbliži roditeljski element sa pozicijom relative, absolute ili fixed.
4. Fixed - Slično absolute, ali je element uvek pozicioniran u odnosu na viewport, tj ne pomera se prilikom skrolovanja
5. Sticky - Element se ponaša kao relative dok ne dostigne određenu poziciju u okviru svog roditelja, nakon čega postaje fixed

z-index kontroliše slojevitost (stacking order) elemenata

Question 6

Inheritance in CSS

Answer 6

Nasleđivanje se odnosi na način na koji određeni stilovi primenjeni na roditeljske elemente mogu automatski biti primenjeni i na njihove potomke. Svojstva koja se nasleđuju automatski:
color
font-family
visibility
line-height

Svako CSS svojstvo može eksplicitno nasleđivati vrednost od roditelja pomoću vrednosti inherit.

body {
color: blue;
}

p {
color: inherit; /* Nasledi boju od roditelja (body) */
}

Question 7

CSS Box model

Answer 7

Osnovni koncept koji definiše kako se svaki HTML element prikazuje na stranici. Sastoji se od sledećih elemenata:
* Content
* Padding
* Border
* Margin

Question 8

Float property

Answer 8

Koristi se za postavljanje elemenata levo ili desno unutar kontejnera. Često se koristi za stvaranje rasporeda. (Tekst sa slikom pored)

Ako float izaziva preklapanje elemanta koristi se clear svojstvo:

div {
clear: both; /* Sprečava preklapanje float-ovanih elemenata */
}

Question 9

Display vs Visibility

Answer 9

Display kontroliše kako će se element prikazati na stranici. Moguće vrednosti su:
* none
* block
* inline
* inline-block
* flex
* grid

Visibility kontroliše vidljivost elemenata, dok element i dalje zauzima taj prostor:

div {
visibility: hidden;
}

Question 10

Media Queries

Answer 10

Omogućavaju primenu različitih CSS stilova na osnovu veličine ekrana, rezolucije ili drugih karakteristika uređaja.

@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 18px;
}
}

Question 11

CSS Image Sprites

Answer 11

Image Sprites je tehnika kojom se više slika kombinuje u jednu veliku sliku kako bi se smanjio broj HTTP zahteva i ubrzalo učitavanje stranice.

Question 12

CSS preprocesori

SASS i LESS

Answer 12

Alati koji proširuju osnovne funkcionalnosti CSS-a dodavanjem mogućnosti poput promenljivih, ugnježdavanja, funkcija…
Kod pisan u preprocesoru se kompajlira u regularan CSS koji pretraživači razumeju.