Learn More
Resend Email
4
Avyy
5y

CSS (and all of frontend) is hard. The last few braincells left in me are slowly dying.
I just wanted a progress bar. HTML 5 supports <progress> out of the box. But all browsers want to act differently. Add more boilerplate for each browser type. Somehow got a transparent background on progress bar but it still won't let me change progress color.(Surprisingly, only IE let me change the color) At last, settled with a transparent div with a colored span inside, + js to handle value. Was this really the best way? Nope. But this was the only thing that worked,(other than importing a JS library, which would render a SVG to replicate a progressbar)

Why is front end so convoluted? Half of the things do not even make sense to me. Is this really the direction we want to go in the future?

rant

css

bad design

web technology
Favorite
Ranter
Comments
  • 2
    5y
    Frontend is hard because every browser wants to be the "Standard" and do their own thing, rather than follow the standards outlined by the RFC spec. Sure somethings work the same and yet others don't or you need browser specific implementations.

    Which leads to doing things like your progress bar, which by default is wrong, but you dont get much of a choice if you want it to work cross browser and potentially cross OS.
  • 1
    5y
    What? That should work, provided you google a little. Otherwise, caniuse.com would list issues for "progress". But a polyfill for setting the colour doesn't seem legit.
  • 2
    5y
    @Fast-Nop the tag is cross browser, but browsers still fuck with it.

    https://css-tricks.com/html5-progre...
  • 1
    5y
    <progress> is more likely "native"-ish form for every browser (that propagates its affection outside the web page), but nothing stops you from hiding it and placing a couple of unified <div>s - I saw styling frameworks doing it a lot, so no sweat :)
  • 0
    5y
    @Fast-Nop It "works". But looks horrible, because browser uses its own preset color and I couldn't find a way to change that. SO failed me 😭

    My serach presented me with https://css-tricks.com/html5-progre..., from where I got the idea of div+span.

    If you are talking about https://github.com/LeaVerou/..., I don't think I should add a polyfill (2.5 KB) just to change a color.

    Note: I am a beginner at CSS, so maybe I did something wrong(unlikely but possible)
  • 2
    5y
    @C0D4 Yeah it's a bit of CSS boilerplate, but that's just copy/paste if you absolutely want to ruin the native look. A polyfill just to avoid a bit of CSS copy/paste doesn't really make sense.
  • 0
    5y
    If all else fails, a possible compromise is a regular old spinner and a percentage value?
  • 3
    5y
    Better progress bar:
    An auto playing Johnny Sins video with the volume slider set to your progress percent.

    That way you know what the progress is without needing to look. Not that you could tear your eyes off @Rutee07's glory anyway. 😉
  • 0
    5y
    @theuser Can't. Progress bar is for how much I have scrolled from top. Linear ones are better(due to obvious reasons)
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment