CSS Frage zum Audio Player in unterschiedlichen Browsern

[Tommy Herrmann]

Moin,

ich habe gestern dem Audio-Player:

... den ich als BBCode für den Forum-Editor entwickelt habe:

Code: Alles auswählen

[audio=https://www.mobirise-tutorials.com/music/sunrise.mp3][/audio]

... der durch dieses Tag erzeugt wird:

Code: Alles auswählen

<audio src="{URL}" controls>{TEXT}</audio>

... ein wenig CSS gegeben, damit der Player in den unterschiedlichen Browsern halbwegs ähnlich dargestellt wird, und möchte meine Änderung der CSS-Datei vom Forum hier mit euch teilen:

Code: Alles auswählen

/* changed by Tommy - audio player  BBCode */
audio {
  width: 300px;
  max-width: 90%;
  height: 30px;
  transition: all 0.5s linear;
  box-shadow: 2px 2px 4px 0px #006773;
  border-radius: 30px;
  background-color: blue !important;
  opacity: 0.8;
}
audio::-webkit-media-controls-panel {
  background-color: lightblue;
}
audio:hover, audio:focus, audio:active {
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

Kann mir jemand folgendes sagen:

1) wieso wird das Pseudo-Element vom Notepad++ Editor angemeckert:

Code: Alles auswählen

audio::-webkit-media-controls-panel

Nur so funktioniert die Farbänderung in Chrome basierten Browsern. Im Firefox muss das dagegen ohne Pseudo-Element angegeben sein.

2) warum nimmt der Chrome basierte Browser nicht die Farbe "blue" an, sondern nur die Farbe "lightblue". Der Firefox will dagegen "lightblue" nicht darstellen, sondern nur "blue"