Artwork

Вміст надано Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers. Весь вміст подкастів, включаючи епізоди, графіку та описи подкастів, завантажується та надається безпосередньо компанією Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers або його партнером по платформі подкастів. Якщо ви вважаєте, що хтось використовує ваш захищений авторським правом твір без вашого дозволу, ви можете виконати процедуру, описану тут https://uk.player.fm/legal.
Player FM - додаток Podcast
Переходьте в офлайн за допомогою програми Player FM !

Hasty Treat - Stylin the Unstylables

21:31
 
Поширити
 

Manage episode 292705636 series 1469447
Вміст надано Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers. Весь вміст подкастів, включаючи епізоди, графіку та описи подкастів, завантажується та надається безпосередньо компанією Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers або його партнером по платформі подкастів. Якщо ви вважаєте, що хтось використовує ваш захищений авторським правом твір без вашого дозволу, ви можете виконати процедуру, описану тут https://uk.player.fm/legal.

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes Can it be styled? Solutions

04:28 - Just style the defaults

  • Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
  • This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
  • Select
  • Input - number, date, etc.
    • Very hard to style
    • Often need appearance: none; for mobile
  • Checkbox / Radio
  • Generally speaking, these CSS Properties can be applied to all inputs:
    • font-size
    • color
    • padding
    • margin
    • background / images
    • outline (remember focus)
    • border

08:20 - Overlap with more dom elements, set background images

  • Checkbox / Radio / Toggle buttons
    • Often used :before and :after along with labels — e.g. label + input:checked
  • Select can have element overlap

14:13 - Re-implement the UI with JavaScript

  • Video / Audio
    • HUGE rabbit hole of things to code
  • Very important to maintain accessibility

15:46 - Use a UI Library

17:20 - Open UI

Tweet us your tasty treats!
  continue reading

750 епізодів

Artwork
iconПоширити
 
Manage episode 292705636 series 1469447
Вміст надано Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers. Весь вміст подкастів, включаючи епізоди, графіку та описи подкастів, завантажується та надається безпосередньо компанією Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers або його партнером по платформі подкастів. Якщо ви вважаєте, що хтось використовує ваш захищений авторським правом твір без вашого дозволу, ви можете виконати процедуру, описану тут https://uk.player.fm/legal.

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes Can it be styled? Solutions

04:28 - Just style the defaults

  • Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
  • This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
  • Select
  • Input - number, date, etc.
    • Very hard to style
    • Often need appearance: none; for mobile
  • Checkbox / Radio
  • Generally speaking, these CSS Properties can be applied to all inputs:
    • font-size
    • color
    • padding
    • margin
    • background / images
    • outline (remember focus)
    • border

08:20 - Overlap with more dom elements, set background images

  • Checkbox / Radio / Toggle buttons
    • Often used :before and :after along with labels — e.g. label + input:checked
  • Select can have element overlap

14:13 - Re-implement the UI with JavaScript

  • Video / Audio
    • HUGE rabbit hole of things to code
  • Very important to maintain accessibility

15:46 - Use a UI Library

17:20 - Open UI

Tweet us your tasty treats!
  continue reading

750 епізодів

All episodes

×
 
Loading …

Ласкаво просимо до Player FM!

Player FM сканує Інтернет для отримання високоякісних подкастів, щоб ви могли насолоджуватися ними зараз. Це найкращий додаток для подкастів, який працює на Android, iPhone і веб-сторінці. Реєстрація для синхронізації підписок між пристроями.

 

Короткий довідник