Displaying a Progress bar in different browsers (HTML and CSS)

Question

I’m having trouble configuring the appearance of a Progress bar with css and html

I’m a beginner, I’m doing my site now and I came across the following problem: I can’t get my bar to appear right on Chrome and firefox. In Microsoft Edge it appears the way I wanted to configure it, but when accessing my index.html in Chrome and firefox the Progress bar looks different. Can someone help me?

HTML:

<div class="section" align="center">
    <h2><i>Minhas habilidades</i></h2>
    <hr width="200px">
    <h6>Ao clicar, você será direciado ao Wikipedia, onde fala mais sobre cada uma das minhas habilidades</h6>
</div>
<ul class="abilities">
    <!--consegui corrigir com o margin-left-->
    <li>HTML:<br> <progress min= "0" max="100" value="100"></progress></li>
    <li>CSS:<br> <progress min= "0" max="100" value="10"></progress></li>
    <li>JavaScript:<br> <progress min= "0" max="100" value="60"></progress></li>
</ul>`

CSS:

.abilities{
max-width: 100%;
font-style: italic;
margin-left: 35%;

}

.abilities progress {
border-radius: 10px;
padding: 2px;
color: rgb(247, 111, 111);
background-color: white;

}

Some prints of the problem:

First image: Microsoft Edge, how I wanted it to be displayed Second image: Chrome Third image: Firefox

Answer 1

This is a problem of user-agente each browser formats this tag <progress> as "prefer" so that it has a visual drive more similar to the browser itself, I recommend you make this element with CSS and HTML, using a div or a span

The advantage is that it is already possible to give semantics to this artifice using role and aria-label as you can see here and your code would look like this more or less, with the guarantee to stay the same in all browser! https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

Already the formatting style vc will have to use CSS...

Here is just an example, I do not suggest using Bootstrap for this, but it is only for you to see that only with CSS you get a progress-bar fully cross-browser

Notice how their approach is very similar to the one I quoted above https://getbootstrap.com/docs/4.4/components/progress/ And note also that the div from within each has the class w-75 w-50 and w-25, that means 75% wide, 50% wide etc, but you can do the classes you want, like w-33

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="progress m-5">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress m-5">
  <div class="progress-bar w-50" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress m-5">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Here you can read more about what is the user-agent What is User Agent Stylesheets?