← Wszystkie tematy

Pytania rekrutacyjne HTML i CSS (Middle) z odpowiedziami

75 pytań na rozmowę rekrutacyjną z tematu HTML i CSS (Middle) - z poprawnymi odpowiedziami, wyjaśnieniami i linkami do dokumentacji.

Rozwiąż ten test
  1. 1.Jaka jest specyficzność selektora nav#main .item:hover > a::before?
  2. 2.Jak nadpisać regułę z !important z zewnętrznej biblioteki, nie ruszając jej kodu?
  3. 3.Do czego rozwija się skrót flex: 1?
  4. 4.Czym flex-basis różni się od width na elemencie flex w wierszu (flex-direction: row)?
  5. 5.Wewnątrz elementu flex długi tekst z text-overflow: ellipsis się nie ucina, tylko rozciąga kolumnę. Jak to naprawić?
  6. 6.Czym repeat(auto-fill, minmax(200px, 1fr)) różni się od repeat(auto-fit, minmax(200px, 1fr))?
  7. 7.Jak w Grid z nazwanymi obszarami zdefiniować układ „nagłówek na górze, sidebar i treść pośrodku, stopka na dole”?
  8. 8.Czym jest siatka niejawna (implicit grid)?
  9. 9.Co robi place-items: center na kontenerze grid?
  10. 10.Kiedy lepiej pasuje Grid, a kiedy Flexbox?
  11. 11.Ile wyniesie font-size: clamp(1rem, 2.5vw, 2rem) na ekranie o szerokości 1000px (1rem = 16px)?
  12. 12.Po co używać właściwości logicznych typu margin-inline-start zamiast margin-left?
  13. 13.Czym transition różni się od animation?
  14. 14.Które właściwości najlepiej animować, aby uzyskać płynne 60 FPS?
  15. 15.Dlaczego transform: translate() jest często lepszy niż zmiana left na elemencie z position: absolute w animacjach ruchu?
  16. 16.Jak należy używać will-change?
  17. 17.Czym jest Critical CSS?
  18. 18.Co mierzy metryka CLS (Cumulative Layout Shift)?
  19. 19.Która technika najlepiej zapobiega przesunięciom układu przy ładowaniu obrazków?
  20. 20.Co robi font-display: swap w @font-face?
  21. 21.Do czego służą atrybuty srcset i sizes na <img>?
  22. 22.Kiedy potrzebny jest <picture>, a nie samo <img srcset>?
  23. 23.Co robi loading="lazy" na <img> i kiedy NIE należy go używać?
  24. 24.Co robi object-fit: cover na <img> z ustawionymi width i height?
  25. 25.Jaka jest specyficzność :where(.card, #hero) p?
  26. 26.Do czego pasuje selektor .card:has(img)?
  27. 27.Czym zasadniczo różnią się zmienne CSS (--x) od zmiennych Sass ($x)?
  28. 28.Czym jest kontekst nakładania (stacking context) i dlaczego z-index: 9999 może „nie działać”?
  29. 29.position: sticky nie działa, choć ustawiono top: 0. Jaka jest najbardziej prawdopodobna przyczyna?
  30. 30.Czym jest blokowy kontekst formatowania (BFC) i jak go utworzyć?
  31. 31.Co nowego jest w składni @media (width >= 768px)?
  32. 32.Do czego służą zapytania kontenerowe @container?
  33. 33.Dlaczego height: 100vh na telefonie może być wyższe niż widoczny obszar i jak to naprawić?
  34. 34.Co oznacza wartość currentColor?
  35. 35.Czym różnią się wartości initial, inherit i unset?
  36. 36.Jak w BEM poprawnie nazwać klasę tytułu wewnątrz bloku card w wariancie „akcent”?
  37. 37.Jak CSS Modules rozwiązują konflikty nazw klas?
  38. 38.Dlaczego :focus-visible jest lepszy niż :focus do stylowania obrysu fokusu?
  39. 39.Co robi tabindex="-1"?
  40. 40.Kiedy aria-label jest uzasadniony?
  41. 41.Jak w Tailwind zastosować dowolną wartość, której nie ma w motywie?
  42. 42.Dlaczego nie można składać nazwy klasy Tailwind w stylu ` bg-${color}-500 `?
  43. 43.Jak w Tailwind v4 dodać własny kolor brand, aby działały bg-brand, text-brand itd.?
  44. 44.Do czego służą group i peer w Tailwind?
  45. 45.Komponent React łączy zewnętrzne klasy: className={"p-2 " + props.className} i dostaje p-4. Jaki będzie padding?
  46. 46.Do czego służy dyrektywa @apply w Tailwind i dlaczego nie należy jej nadużywać?
  47. 47.Jak uwzględnić użytkowników, którym animacje sprawiają dyskomfort?
  48. 48.Jak zbudować układ dwukolumnowy z sidebarem o stałej szerokości i treścią wypełniającą resztę?
  49. 49.Który format obrazów zwykle daje najlepszą kompresję zdjęć w nowoczesnych przeglądarkach?
  50. 50.Jak poprawnie dołączyć style tylko do druku?
  51. 51.Jaka jest specyficzność :is(#hero, .card) p?
  52. 52.Co daje aspect-ratio: 16 / 9 kontenerowi wideo?
  53. 53.Co oznacza inset: 0 na absolutnie pozycjonowanej nakładce?
  54. 54.Co robi grid-auto-flow: dense?
  55. 55.Po co dodawać flex-shrink: 0 ikonie we flexowym wierszu z długim tekstem?
  56. 56.Jak dosunąć ostatni element flexowego paska nawigacji do prawej krawędzi?
  57. 57.Co robi object-position: top razem z object-fit: cover?
  58. 58.Do czego służy @supports?
  59. 59.Jak w czystym CSS podążać za systemowym ciemnym motywem użytkownika?
  60. 60.Co robi color-scheme: light dark na :root?
  61. 61.Do czego służy accent-color?
  62. 62.Co dopasowuje .field:focus-within?
  63. 63.Jak zmienić kolor punktorów listy bez zmiany tekstu?
  64. 64.Jak CSS może automatycznie numerować nagłówki typu „Step 1”, „Step 2”?
  65. 65.Jak przyciąć tekst do trzech linii z wielokropkiem?
  66. 66.Skąd mała szczelina pod <img> wewnątrz <div>?
  67. 67.Co zmienia transform-origin?
  68. 68.Dlaczego transition: all 0.3s uchodzi za zły nawyk?
  69. 69.Po co dodawać aria-hidden="true" do dekoracyjnej ikony obok etykiety przycisku?
  70. 70.Jak sprawić, by czytnik ekranu ogłosił „Saved” po akcji asynchronicznej bez przenoszenia fokusu?
  71. 71.Czego potrzeba, by <div role="button"> zachowywał się jak prawdziwy przycisk?
  72. 72.Jak ukryć etykietę tekstową wizualnie, ale zachować ją dla czytników ekranu?
  73. 73.Jaki alt powinien mieć link do strony głównej złożony tylko z ikony?
  74. 74.Jak w Tailwind stylizować element na podstawie atrybutu data-state?
  75. 75.Co robi srcset="logo.png 1x, logo@2x.png 2x"?