Wpisy z kategorii HTML i CSS
Strona 1
-
Inkunabuły mądrości
Po odświeżeniu dygresji przyszedł czas na kolejny częsty element mojego bloga: bloczki z kodem!
-
Interesujący dyngs
Zwrot deklaratywny trwa w najlepsze. Oprócz obsługi komend, ostatnio pojawiło się też Interest Invoker API (API Wyzwalacza Zainteresowania).
-
W gąszczu jednakowości
Raczej większość z nas wie, że divitis to jedna z plag Sieci i nie warto przyczyniać się do jego rozprzestrzeniania się. Warto natomiast dbać o semantykę HTML-a i dobierać elementy do konkretnego zastosowania. Chcemy nawigacji? Mamy
nav. Potrzebujemy listy? Możemy wybrać spomiędzyol,ulczy nawetdl. W zdecydowanej większości przypadków da się dobrać lepszy element niżdiv.Ale czasami się nie da. Czasami po prostu musimy dodać element, żeby coś ostylować. Ba, czasami w ekstremalnych przypadkach trafimy w gąszcz
divów:HTML <div class="first"> <div class="second"> <div class="third"> <div class="fourth"> <div class="fifth"> <div class="sixth">POMOCYYYYYY!!!!!</div> </div> </div> </div> </div> </div>I mimo usilnych starań, żaden inny element HTML nie pasuje. Jak się odnaleźć w tej dżungli?!
-
Frywolne marginalia
Nie będę ukrywał – ten blog pełen jest dygresji. Na tyle ich tutaj dużo, że nawet doczekały się swoich własnych stylów. Niemniej całe rozwiązanie było napisane na kolanie i mocno niedomagało. W końcu postanowiłem choć trochę je poprawić.
-
Rozkazuję ci…!
W 2024 wspominałem o zwrocie deklaratywnym w standardach sieciowych: coraz więcej API przenosi rzeczy dotąd możliwe tylko w JS-ie na grunt HTML-a. Wspominałem tam też o wywoływaczach, które wówczas były tylko propozycją. Minęło ok. 1.5 roku i oto
wywoływaczewyzwalacze są już w przeglądarkach. -
Zwrot deklaratywny
Webdevelopment przyzwyczaił nas już do tego, że pewnych rzeczy bez JS-a nie da się zrobić. Niektóre ficzery przeglądarkowe są bowiem dostępne tylko z poziomu JS-owych API. Inne rzeczy w ogóle nie są dostępne w przeglądarce i trzeba sobie je samemu napisać w – a jakże! – JS-ie. Niemniej ostatnio można zaobserwować pewien deklaratywny zwrot w standardach sieciowych.
-
O semantyce słów kilka
W świecie webdevu semantyka to dość modne słowo. Tylko co to tak naprawdę jest i do czego służy?
-
Stylowalne ikonki SVG
To, że SVG jest lepsze od fontów z ikonami, jest już raczej dość powszechną wiedzą. Ale jeden problem związany z SVG wydaje się nas prześladować od lat i wciąż nie widać rozwiązania na horyzoncie: ikony SVG w zewnętrznym pliku są średnio używalne. Nie da się ich ot tak wczytać z zewnętrznej domeny (same origin policy, FTW!), nie da się stylować ich części, a do niedawna w ogóle nic się nie dało z nimi zrobić…
Wszystkie ikony użyte w tym artykule pochodzą z Devicon.
-
Czy div jest dostępny?
14 lutego Ryan Florence napisał na Twitterze, że przyciski w React Native Web (RNW) są dostępne:
Both true:
-
Most devs should just use a
<button>, not<a>,<div>,<span>, etc. -
React Native Web’s div buttons are better buttons than
<button>
- Still keyboard and AT accessible
- Better touch event handling
- Populate
e.relatedTargetunlike<button> - Easier to style
I think a lot of HTML/CSS experts are being overly critical of React because they see the output of the new https://twitter.com and think they know there are fundamental flaws when they see the div soup.
That div soup is accessible.HTML <h2/> <div role="heading" aria-level="2"/> <button/> <div {...allTheRightAttributesAndEventHandlers}/>These are identical as far as accessibility is concerned when implemented correctly.
If you’re critical of this, you don’t actually care about a11y, you care about your niche
So yeah … just use a button, or a RNW button, but not your own div button.
[Obydwa stwierdzenia są prawdziwe:
- Większość devów powinna używać
<button>zamiast<a>,<div>,<span>itd. - Przycisk z React Native Web oparty o div jest lepszy niż
<button>: - Wciąż dostępny z poziomu klawiatury i technologii asystującej.
- Lepsza obsługa dotyku.
- Zawiera
e.relatedTargetw przeciwieństwie do<button>. - Łatwiejszy do stylowania.
Myślę, że wielu ekspertów HTML/CSS jest zbytnio krytycznych względem Reacta, ponieważ widzą oni kod nowego Twittera i myślą, że wiedzą, żę są tam podstawowe błędy, gdy widzą divową zupę.
Ta divowa zupa jest dostępna.
JavaScript <h2/> <div role="heading" aria-level="2"/> <button/> <div {...allTheRightAttributesAndEventHandlers}/Te kody są identyczne, jeśli bierzemy pod uwagę poprawnie zaimplementowaną dostępność.
Jeśli jesteś krytyczny wobec tego, tak naprawdę nie dbasz o dostępność, ale o własną niszę.
Więc tak… po prostu użyj przycisku albo przycisku z RNW, ale nie swojego własnego przycisku na
div.]Takie podejście jest nie tyle niewłaściwe, co szkodliwe. Postaram się pokrótce przybliżyć, czemu tak uważam.
-
-
Jednoplikowe komponenty
Chyba każdy, kto miał styczność z frameworkiem Vue, słyszał również o jego jednoplikowych komponentach. Ten super prosty pomysł pozwala definiować cały kod odpowiedzialny za konkretny komponent w jednym pliku. Jest to na tyle dobre rozwiązanie, że pojawiła się inicjatywa przeniesienia tego mechanizmu do przeglądarek. Niemniej – stanęła w miejscu i od sierpnia tamtego roku nic się nie wydarzyło. Mimo to myślę, że spojrzenie na ten problem i próba dostosowania go do przeglądarki jest ciekawym zagadnieniem, którym się dzisiaj zajmiemy.