← Wszystkie tematy

Pytania rekrutacyjne HTML i CSS (Senior) z odpowiedziami

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

Rozwiąż ten test
  1. 1.Jak warstwy kaskadowe @layer wpływają na priorytet stylów?
  2. 2.Jak zwykłe (bez !important) style w warstwach i poza warstwami mają się do siebie?
  3. 3.Co robi @scope (.card) to (.card__content) { img { ... } }?
  4. 4.Jaki problem rozwiązuje subgrid?
  5. 5.Przez jakie etapy przechodzi przeglądarka, aby zaktualizować klatkę po zmianie stylu?
  6. 6.Czym jest layout thrashing (wymuszony synchroniczny layout)?
  7. 7.Co daje contain: layout paint (lub contain: content)?
  8. 8.Jak content-visibility: auto przyspiesza długie strony?
  9. 9.Dlaczego ::before i ::after nie działają na <img> i <input>?
  10. 10.Do czego float nadal się nadaje we współczesnych układach?
  11. 11.Dlaczego dla breakpointów w media queries często zaleca się em zamiast px?
  12. 12.Co stanie się z elementem position: fixed, jeśli przodek ma transform: translateZ(0)?
  13. 13.Czym overflow: clip różni się od overflow: hidden?
  14. 14.Jak dołączać moduły Sass teraz, gdy @import jest przestarzały?
  15. 15.Czym Dart Sass różni się od Node Sass?
  16. 16.Jakie problemy ma runtime CSS-in-JS (styled-components, Emotion) z SSR i React Server Components?
  17. 17.Które techniki zmniejszają wagę i wpływ na wydajność własnego fontu webowego?
  18. 18.Jak zmienia się strategia łączenia zasobów przy przejściu z HTTP/1.1 na HTTP/2+?
  19. 19.Czym jest budżet wydajności (performance budget)?
  20. 20.Czym dane laboratoryjne (Lighthouse) różnią się od danych terenowych (CrUX, RUM)?
  21. 21.Jakie trzy metryki tworzą dziś Core Web Vitals?
  22. 22.Jak zbudować poziomą galerię ze slajdami, które „zatrzaskują się” na miejscu bez JavaScriptu?
  23. 23.Co umożliwia @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }?
  24. 24.Jak ostylować wnętrze Web Componentu, gdy Shadow DOM izoluje jego style?
  25. 25.Czym różnią się min-content, max-content i fit-content jako wartości szerokości?
  26. 26.Co tworzy nowy kontekst nakładania nawet bez position i z-index?
  27. 27.W jakich warunkach pionowe marginesy rodzica i jego pierwszego dziecka się zapadają?
  28. 28.Dlaczego długie słowo lub szeroka tabela może „rozsadzić” kolumnę grid 1fr?
  29. 29.Dlaczego oklch() jest wygodniejszy od hsl() w systemach projektowych?
  30. 30.Do czego służy color-mix(in oklch, var(--brand) 80%, white)?
  31. 31.Co daje natywne zagnieżdżanie CSS (&)?
  32. 32.Do czego służy CSS Anchor Positioning?
  33. 33.Czym jest View Transitions API?
  34. 34.Jakie jest minimum dla dostępnego okna modalnego?
  35. 35.Co robi atrybut inert?
  36. 36.Jakiego minimalnego kontrastu tekstu wymaga WCAG na poziomie AA dla zwykłego tekstu?
  37. 37.Czym różnią się poziomy zgodności WCAG A, AA i AAA?
  38. 38.Kiedy atrybuty ARIA są potrzebne, a kiedy lepiej się bez nich obejść?
  39. 39.Co robi text-wrap: balance na nagłówku?
  40. 40.Czym są landmarki HTML i dlaczego są ważne?
  41. 41.Jaki problem z dostępnością jest typowy dla SPA, gdy „strona” zmienia się na kliencie?
  42. 42.Czym Tailwind v4 zasadniczo różni się od v3?
  43. 43.Jak sprawić, by tryb ciemny w Tailwind v4 zależał od klasy .dark, a nie od ustawienia systemowego?
  44. 44.Projektujesz architekturę CSS wielojęzycznej strony, w tym po arabsku (RTL) i japońsku. Co trzeba przewidzieć?
  45. 45.Które podejście do płynnej typografii najlepiej szanuje skalowanie czcionki przez użytkownika?
  46. 46.Tabela z 10 000 wierszy przycina się przy przewijaniu. Które rozwiązanie jest najskuteczniejsze?
  47. 47.Galeria z 50 filmami z YouTube ładuje się bardzo wolno. Co zrobić najpierw?
  48. 48.Czym preload różni się od prefetch w <link rel>?
  49. 49.Czym defer różni się od async na <script>?
  50. 50.Projektant nalega na całkowicie własne style każdej kontrolki w złożonym formularzu. Jakie podejście jest rozsądne?
  51. 51.Co oznacza font-size: 5cqi wewnątrz zapytania kontenerowego?
  52. 52.Dlaczego błędy lepiej stylizować przez :user-invalid niż :invalid?
  53. 53.Co daje atrybut popover?
  54. 54.Jaki problem rozwiązuje @starting-style?
  55. 55.Na co pozwalają animacje sterowane przewijaniem (animation-timeline: scroll())?
  56. 56.Co robi color: light-dark(#111, #eee)?
  57. 57.Czego potrzebuje hyphens: auto, by działać poprawnie?
  58. 58.Po co w tabelach i licznikach czasu używać font-variant-numeric: tabular-nums?
  59. 59.Jaka jest główna zaleta czcionki zmiennej (variable font)?
  60. 60.Jak size-adjust w zapasowym @font-face ogranicza przesunięcia układu?
  61. 61.Co robi fetchpriority="high" na głównym obrazie?
  62. 62.Po co dodawać isolation: isolate do korzenia komponentu?
  63. 63.Czemu zapobiega overscroll-behavior: contain na przewijanej treści modala?
  64. 64.Któremu przesunięciu układu zapobiega scrollbar-gutter: stable?
  65. 65.Co dzieje się z twoimi kolorami w trybie wysokiego kontrastu Windows (forced colors)?
  66. 66.Czym jest skip link?
  67. 67.Jak poprawnie powiązać komunikat o błędzie z polem formularza?
  68. 68.Czego wymaga kryterium WCAG „Reflow”?
  69. 69.Czego wymaga WCAG 2.2 „Target Size (Minimum)”?
  70. 70.Dlaczego narzędzia budujące generują pliki CSS z hashem treści (app.3f9a1c.css)?
  71. 71.Po co dzielić tokeny projektowe na warstwę prymitywną i semantyczną?
  72. 72.Po co używać dir="auto" dla treści od użytkowników, np. komentarzy?
  73. 73.Dlaczego do leniwego ładowania i efektów pojawiania się lepszy jest IntersectionObserver niż listenery scroll?
  74. 74.Dlaczego unikać @import w zwykłych plikach CSS?
  75. 75.Co wybiera li:nth-child(2 of .visible)?