Wpisy z kategorii HTML i CSS
Strona 1
-
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.<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.
<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.
-
Headings First Principle
Dzisiaj krótko o tym, czym jest Headings First Principle (Zasada Najpierw Nagłówki). Wymyśliłem ją na poczekaniu 20 lutego w trakcie dyskusji nad sensownością znaczników
articleisectioni moim skromnym zdaniem w prosty i sensowny sposób opisuje, jak dzielić stronę na sekcje. -
Standaryzacja AMP?
Google ogłosiło, że standaryzuje technologie związane z AMP. Mam jednak pewne wątpliwości co do całego procesu…
-
Kurtyna cienia
W dniach 5 i 6 marca 2018 roku postanowiono zabić deklaratywny Shadow DOM. Stało się to w czasie meetingu Web Platform WG w Tokio.
-
AMP – a na co to komu?
Siedząc od lat w środowisku webdevowym, wyrobiłem sobie dość silne opinie o poszczególnych aspektach działania dżungli zwanej Siecią. Dzisiaj podzielę się jedną z takich opinii.
-
O nagłówkach słów kilka
Mam już dość powtarzania wciąż na nowo i nowo bzdur odnośnie wykorzystania nagłówków w HTML5, co wręcz prowadzi do “poprawiania” dobrych materiałów w Sieci. Dlatego dzisiaj słów kilka o nagłówkach.
Subskrybuj kategorię HTML i CSS