` i przemierza jego rodzica aż do roota, aby znaleźć element ``. Dla konkretnego ``, jak tylko znajdzie ``, wie że `` dopasowane i może zatrzymać dopasowanie.
###### Bibliografia
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
[[↑] Powrót na górę](#pytania-z-css)
### Opisz pseudoelementy i omów, do czego służą.
Pseudoelement CSS jest słowem kluczowym dodawanym do selektora, który pozwala stylizować określoną część wybranych elementów. Mogą być używane do dekoracji (`:first-line`, `:first-letter`) lub dodawać elementy do znaczników (w połączeniu z `content: ...`) bez konieczności modyfikowania znaczników (`:before`, `:after`).
- `:first-line` i `:first-letter` może służyć do ozdabiania tekstu.
- Użycie `.clearfix` jak pokazano powyżej, aby dodać element zero-space z `clear: both`.
- Trójkątne strzałki w tooltips używają `:before` i `:after`. Zachęca do rozdzielenia rzeczy, ponieważ trójkąt jest uważany za część stylizacji, a nie DOM.
###### Bibliografia
- https://css-tricks.com/almanac/selectors/a/after-and-before/
[[↑] Powrót na górę](#pytania-z-css)
### Wyjaśnij swoje zrozumienie box model i sposób, w jaki chcesz, aby przeglądarka w CSS renderowała układ w różnych modelach pudełkowych.
Model pola CSS opisuje prostokątne pola, które są generowane dla elementów w drzewie dokumentu i rozmieszczone zgodnie z wizualnym modelem formatowania. Każdy box ma pole zawartości (np. text, an image, etc.) i opcjonalne otoczenie polami `padding`, `border`, i `margin`.
Model pudełkowy CSS odpowiada za obliczenie:
- Ile miejsca zajmuje element bloku.
- Niezależnie od tego, czy granice i/lub marginesy nachodzą na siebie, czy się zawalają.
- Wymiary pudełka.
Model pudełkowy ma następujące zasady:
- Wymiary elementu bloku są obliczane przez `width`, `height`, `padding`, `border` i `margin`.
- Jeśli `height` nie jest określona, element blokowy będzie tak samo wysoki, jak zawarta w nim zawartość, plus `padding` (chyba że są to floaty, dla których patrz poniżej).
- Jeśli `width` nie jest określona, element blokowy non-floated rozszerzy się, aby dopasować się do szerokości jego rodzica minus `padding`.
- `height` elementu jest obliczany na podstawie zawartości `height`.
- `width` elementu jest obliczany na podstawie zawartości `width`.
- Domyślnie, `padding` i `border` nie są częścią `width` oraz `height` elementu.
###### Bibliografia
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
[[↑] Powrót na górę](#pytania-z-css)
### Co robi `* { box-sizing: border-box; }`? Jakie są tego zalety?
- Domyślnie, elementy mają `box-sizing: content-box` zastosowane, i uwzględniany jest tylko rozmiar contentu.
- `box-sizing: border-box` zmienia jak `width` i `height` elementów są liczone, `border` i `padding` są również uwzględniane w obliczeniach.
- `height` elementu jest teraz obliczany na podstawie zawartości `height` + pionowy `padding` + pionowa szerokość `border`.
- `width` elementu jest teraz obliczany na podstawie zawartości `width` + poziomy `padding` + pozioma szerokość `border`.
- Biorąc pod uwagę `padding` oraz `border` jako część naszego modelu pudełkowego lepiej współgra z tym, jak projektanci wyobrażają sobie treść w gridach.
###### Bibliografia
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
[[↑] Powrót na górę](#pytania-z-css)
### Czym jest właściwość `display` w CSS i czy możesz podać kilka przykładów jej użycia?
- `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`.
| `display` | Description |
| :-- | :-- |
| `none` | Does not display an element (the elementv no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree |
| `block` | The element consumes the whole line in the block direction (which is usually horizontal) |
| `inline` | Elements can be laid out beside each other |
| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height` |
| `table` | Behaves like the `` element |
| `table-row` | Behaves like the `` element |
| `table-cell` | Behaves like the `| ` element |
| `list-item` | Behaves like a `` element which allows it to define `list-style-type` and `list-style-position` |
[[↑] Powrót na górę](#pytania-z-css)
### Jaka jest różnica pomiędzy `inline`, a `inline-block`?
Dla dobrego porównania wrzucę porównanie z `block`.
| | `block` | `inline-block` | `inline` |
| --- | --- | --- | --- |
| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. |
| Positioning | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside it. | Flows along with other content and allows other elements beside it. |
| Can specify `width` and `height` | Yes | Yes | No. Will ignore if being set. |
| Can be aligned with `vertical-align` | No | Yes | Yes |
| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
[[↑] Powrót na górę](#pytania-z-css)
### Jaka jest różnica między pozycjonowaniem `relative`, `fixed`, `absolute` i `static` elementu?
Element pozycjonowany to element, którego obliczona właściwość `position` jest albo `relative`, `absolute`, `fixed` lub `sticky`.
- `static` - Pozycja domyślna; element wpłynie na stronę w normalny sposób. Właściwości `top`, `right`, `bottom`, `left` i `z-index` nie mają zastosowania.
- `relative` - Pozycja elementu jest dopasowywana względem siebie, bez zmiany układu (i tym samym pozostawiając odstęp dla elementu, w którym byłby, gdyby nie został ustawiony).
- `absolute` - Element jest usuwany z przepływu strony i ustawiany w określonej pozycji względem najbliższego umieszczonego przodka, jeśli taki istnieje, lub w inny sposób względem początkowego bloku zawierającego. Pola absolutnie pozycjonowane mogą mieć marginesy i nie zwijają się z żadnymi innymi marginesami. Te elementy nie wpływają na pozycję innych elementów.
- `fixed` - Element jest usuwany z przepływu strony i ustawiany w określonej pozycji względem viewport i nie porusza się podczas przewijania.
- `sticky` - Pozycjonowanie sticky to hybryda pozycjonowania względnego i ustalonego. Element jest traktowany jako pozycja `relative`, dopóki nie przekroczy określonego progu, w którym to momencie jest traktowany jako pozycja `fixed`.
###### Bibliografia
- https://developer.mozilla.org/en/docs/Web/CSS/position
[[↑] Powrót na górę](#pytania-z-css)
### Z jakich istniejących frameworków CSS korzystałeś lokalnie lub na produkcji? Jak byś je zmienił/ulepszył?
- **Bootstrap** - Cykl wolnego wydania. Bootstrap 4 jest w wersji alfa od prawie 2 lat. Dodać spinner button component, ponieważ jest on powszechnie używany.
- **Semantic UI** - Struktura kodu źródłowego sprawia, że dostosowanie motywu jest niezwykle trudne do zrozumienia. Niekonwencjonalny system tematyczny jest trudny do dostosowania. Zahardkodowana ścieżka konfiguracji w bibliotece dostawcy. Niezbyt dobrze zaprojektowany do nadpisywania zmiennych w przeciwieństwie do Bootstrap.
- **Bulma** - Wymaganych jest wiele niesemantycznych i zbędnych klas i znaczników. Niekompatybilny wstecz. Uaktualnianie wersji psuje aplikację w subtelny sposób.
[[↑] Powrót na górę](#pytania-z-css)
### Czy robiłeś coś w nowej specyfikacji CSS Flexbox lub Grid?
Tak. Flexbox jest przeznaczony głównie do układów 1-wymiarowych, a Grid do układów 2-wymiarowych.
Flexbox rozwiązuje wiele typowych problemów w CSS, takich jak pionowe centrowanie elementów w kontenerze, sticky footer itp. Bootstrap i Bulma są oparte na Flexbox i jest to prawdopodobnie zalecany sposób tworzenia układów w dzisiejszych czasach. Próbowałem już Flexboksa wcześniej, ale napotkałem pewne problemy z niekompatybilnością przeglądarki (Safari) przy użyciu `flex-grow`, i musiałem przepisać mój kod przy użyciu `inline-block` i matematyki, aby obliczyć szerokości w procentach, to nie było miłe doświadczenie.
Grid jest zdecydowanie najbardziej intuicyjnym podejściem do tworzenia układów opartych na grid'zie (lepiej!), ale obsługa przeglądarki nie jest w tej chwili szeroka.
###### Bibliografia
- https://philipwalton.github.io/solved-by-flexbox/
[[↑] Powrót na górę](#pytania-z-css)
### Czy potrafisz wyjaśnić różnicę między kodowaniem strony internetowej, aby była responsywna, a używaniem mobile-first strategy?
Pamiętaj, że te dwa podejścia nie są wykluczające.
Uaktywnienie strony internetowej oznacza, że niektóre elementy zareagują, dostosowując jej rozmiar lub inne funkcje zgodnie z rozmiarem ekranu urządzenia, zwykle szerokością viewport, poprzez CSS media queries, na przykład zmniejszając rozmiar czcionki na mniejszych urządzeniach.
```css
@media (min-width: 601px) {
.my-class {
font-size: 24px;
}
}
@media (max-width: 600px) {
.my-class {
font-size: 12px;
}
}
```
Mobile-first strategy również jest responsywna, jednak zgadza się, że powinniśmy domyślnie zdefiniować wszystkie style dla urządzeń mobilnych, a później dopiero dodać konkretne reguły responsywne do innych urządzeń. Zgodnie z poprzednim przykładem:
```css
.my-class {
font-size: 12px;
}
@media (min-width: 600px) {
.my-class {
font-size: 24px;
}
}
```
Mobile-first strategy ma 2 główne zalety:
- Jest bardziej wydajna na urządzeniach mobilnych, ponieważ wszystkie zastosowane reguły nie muszą być sprawdzane pod kątem media queries.
- Wymusza pisanie czystszego kodu w odniesieniu do responsywnych reguł CSS.
[[↑] Powrót na górę](#pytania-z-css)
### Czym różni się projektowanie responsywne od projektowania adaptacyjnego?
Zarówno responsywne, jak i adaptacyjne próbują zoptymalizować wrażenia użytkownika na różnych urządzeniach, dostosowując się do różnych rozmiarów viewport, rozdzielczości, kontekstów użytkowania, mechanizmów kontrolnych i tak dalej.
Responsywne projektowanie działa na zasadzie elastyczności - jedna płynna strona internetowa, która może dobrze wyglądać na dowolnym urządzeniu. Responsywne strony internetowe używają media queries, elastycznych gridów i responsywnych obrazów, aby stworzyć wrażenia użytkownika, które zmieniają w zależności od wielu czynników. Jak pojedyncza piłka rosnąca lub kurcząca się, aby zmieścić się w kilku różnych obręczach.
Projektowanie adaptacyjne bardziej przypomina nowoczesną definicję stopniowego ulepszania. Zamiast jednego elastycznego projektu, projekt adaptacyjny wykrywa urządzenie i inne funkcje, a następnie zapewnia odpowiednią funkcję i układ na podstawie predefiniowanego zestawu rozmiarów viewport i innych cech. Witryna wykrywa typ używanego urządzenia i zapewnia wstępnie ustawiony układ tego urządzenia. Zamiast jednej piłki przechodzącej przez kilka różnej wielkości obręczy, będziesz mieć kilka różnych piłek do użycia w zależności od rozmiaru obręczy.
Obie z tych metod mają pewne problemy, które warto ocenić:
- Elastyczne projektowanie może być dość trudne, ponieważ zasadniczo używasz jednego, choć responsywnego układu, pasującego do wszystkich sytuacji. Jak ustawić punkty przerwania media query to jedno z takich wyzwań. Czy używasz standardowych wartości progowych? A może używasz punktów przerwania, które mają sens dla twojego konkretnego układu? Co jeśli ten układ się zmieni?
- Projektowanie adaptacyjne zazwyczaj wymaga user agent sniffing lub wykrywania DPI itp., co może okazać się zawodne.
###### Bibliografia
- https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
[[↑] Powrót na górę](#pytania-z-css)
### Czy kiedykolwiek pracowałeś z grafiką Retina? Jeśli tak, kiedy i jakich technik użyłeś?
_Retina_ jest po prostu marketingowym terminem odnoszącym się do ekranów o wysokiej rozdzielczości ze współczynnikiem pikseli większym niż 1. Kluczową rzeczą, o której należy wiedzieć, jest to, że użycie współczynnika pikseli oznacza, że wyświetlacze emulują ekran o niższej rozdzielczości w celu wyświetlenia elementów o tym samym rozmiarze. Obecnie rozważamy defacto wszystkie wyświetlacze urządzeń mobilnych _retina_.
Przeglądarki domyślnie renderują elementy DOM zgodnie z rozdzielczością urządzenia, z wyjątkiem obrazów.
Aby mieć wyraźną, ładną grafikę, która najlepiej wykorzystuje wyświetlacze retina, musimy w miarę możliwości używać obrazów o wysokiej rozdzielczości. Jednak używanie zawsze obrazów o najwyższej rozdzielczości będzie miało wpływ na wydajność, ponieważ więcej bajtów będzie trzeba przesłać przewodowo.
Aby rozwiązać ten problem, możemy użyć responsywnych obrazów, jak określono w HTML5. Wymaga udostępnienia przeglądarki różnych plików o tym samym obrazie w różnych rozdzielczościach i pozwala zdecydować, który obraz jest najlepszy, używając atrybutu HTML `srcset` i opcjonalnie `sizes`, na przykład:
```html
```
Ważne jest, aby pamiętać, że przeglądarki, które nie obsługują `srcset` HTML5 (np. IE11), zignorują go i zamiast tego użyją `src`. Jeśli naprawdę musimy obsługiwać IE11 i chcemy udostępnić tę funkcję ze względu na wydajność, możemy użyć polyfill JavaScript, np. Picturefill (link w bibliografii).
W przypadku ikon wolałbym również używać plików SVG i czcionek ikon, jeśli to możliwe, ponieważ renderują one bardzo ostro, niezależnie od rozdzielczości.
###### Bibliografia
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- http://scottjehl.github.io/picturefill/
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
[[↑] Powrót na górę](#pytania-z-css)
### Czy jest jakiś powód, dla którego chciałbyś użyć `translate ()` zamiast pozycjonowania `absolute` lub odwrotnie? I dlaczego?
`translate()` jest wartością CSS `transform`. Zmieniając `transform` lub `opacity` nie powoduje ponownego wczytywania przeglądarki ani odmalowywania, ale powoduje kompozycje; podczas gdy zmiana bezwzględnych wyzwalaczy pozycjonowania `reflow`. `transform` powoduje, że przeglądarka tworzy warstwę GPU dla elementu, ale zmiana bezwzględnych właściwości pozycjonowania wykorzystuje procesor. W związku z tym `translate()` jest bardziej wydajny i spowoduje krótszy czas malowania dla płynniejszych animacji.
Kiedy używasz `translate ()`, element nadal zajmuje swoją pierwotną przestrzeń (coś w rodzaju `position: relative`), w przeciwieństwie do zmiany absolutnego pozycjonowania.
###### Bibliografia
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[[↑] Powrót na górę](#pytania-z-css)
### Inne odpowiedzi
- https://neal.codes/blog/front-end-interview-css-questions
- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
---
Stworzone przez @[yangshun](https://github.com/yangshun) polska wersja od @[mbiesiad](https://github.com/mbiesiad)
|
