nicht angemeldet
Rolf B
Gunnar Bittersmann
Matthias Scharwies
Rolf B
MudGuard
Matthias Apsel
Matthias Apsel
Matthias Apsel
Hallo Leute,
gern würde ich Variable, die ich in CSS vergebe im HTML-Dokument nutzen.
Hier der Ansatz:
CSS:
kai345#box {
position: absolute;
left: 0%; top: 75%;
height: auto; width: 90%;
background-color: rgba(255, 255, 255, 0.4);
}
@media only screen (min-width: 2000px) {
Hier sollte für die HTML-Anweisung:
<animate attributeName="x" from="100%" to=-160% dur='25s' repeatCount='indefinite'/>
Variable mit Werten für to und dur stehen, die bei anderen Auflösungen verändert werden können.
}
@media only screen and (min-width: 1800px) and (max-width: 1999px) {
Hier müssen beide Werte abweichen, damit beim Betrachter der gleiche Effekt zu sehen ist.
}
HTML:
...
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="40px">
<text x="0" y="30" style="font:20px Arial;"> +++ Hier steht ein recht langer Lauftext, der selbst bei hohen Auflösungen den Bildschirm ausfüllt. +++
<animate attributeName="x" from="100%" to=-160% dur='25s' repeatCount='indefinite'/>
</text>
</svg>
</div>
In der HTML-Datei müssen dann die aktuell zutreffenden Werten in to und dur eingesetzt werden.
Auch eine Variante, in der ich zuvor den tatsächlichen ViewPoint auslese und entsprechend dem Verhältnis die Größen der beiden Variable berechnen lasse, könnte ich mir vorstellen.
Hat jemand eine Idee, wie ich die beiden Werte in der HTML-Datei dynamisch halten kann?
Schon mal vielen Dank an euch!!!
Hallo Schweriner,
Lauftext ist unbeliebt, das weißt Du? Ihn mit SVG zu animieren statt das missbilligte <marquee> Element zu verwenden macht die Sache nicht besser.
Wie auch immer. Das dur Attribut kannst du nicht per CSS setzen. Wohl aber x, und du kannst Animierungsfunktionen aus CSS verwenden, um x zu animieren.
Rolf
@@Rolf B
Lauftext ist unbeliebt, das weißt Du?
a/k/a digitales Ungeziefer
statt das missbilligte <marquee> Element zu verwenden
Das dur Attribut kannst du nicht per CSS setzen. Wohl aber x […] Hier ein Beispiel mit rx
In Chromium-Browsern. Weder Firefox noch Safari spielen da schon mit.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Servus!
@@Rolf B
Lauftext ist unbeliebt, das weißt Du?
a/k/a digitales Ungeziefer
statt das missbilligte <marquee> Element zu verwenden
Das dur Attribut kannst du nicht per CSS setzen. Wohl aber x […] Hier ein Beispiel mit rx
In Chromium-Browsern. Weder Firefox noch Safari spielen da schon mit.
Doch, aber blöderweise benötigt der Firefox Pixeleinheiten für rx:
@keyframes moveCircle {
0% { rx: 1px; }
50% { rx: 4px; }
100% { rx: 1px; }
}
Herzliche Grüße
Matthias Scharwies
Hallo Gunnar,
verd***t - das hätte ich besser recherchieren müssen.
Immerhin funktioniert der px Trick im Fuchs, aber Edge 44 bleibt, getreu seinem Namen, eckig 😕
So, heißt also für den konkreten Anwendungszweck: Total egal. Bitte keinen Lauftext für das Web. Weil nervig.
Und für andere Anwendungen: die Animation als PE ansehen und auf nicht unterstützten Browsern weglassen. ODER ein Workaround mit JavaScript (requestAnimationFrame kommt in den Sinn). Führt zur Folgefrage: wie detektiert man am sinnvollsten, dass man den Workaround braucht?
Rolf
@@Rolf B
verd***t - das hätte ich besser recherchieren müssen.
Besser merken. 😉
Wo ich’s grad sehe: Hatte ich da tatsächlich „Standart“ geschrieben? Wie peinlich. 🤦♂️
aber Edge 44 bleibt
Erstaunlicherweise. Ich hatte erwartet, dass der wesentlich schneller verschwindet.
Und für andere Anwendungen: die Animation als PE ansehen und auf nicht unterstützten Browsern weglassen. ODER ein Workaround mit JavaScript (requestAnimationFrame kommt in den Sinn). Führt zur Folgefrage: wie detektiert man am sinnvollsten, dass man den Workaround braucht?
return false; 😉
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
dass ich noch Edge 44 habe mag daran liegen, dass ich bisher das Win10 Funktionsupdate 1909 noch liegen gelassen habe.
return false; 😉
Ist das deine Art, „keine Ahnung“ zu sagen?
Rolf
@@Rolf B
return false; 😉
Ist das deine Art, „keine Ahnung“ zu sagen?
Nein. Meine Art, „die Animation als PE ansehen und auf nicht unterstützten Browsern weglassen“ zu bestätigen.
PE: progressive enhancement
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
nicht jede Animation ist PE. Vielleicht möchte man irgendwelche Sachverhalte visualisieren?
Rolf
Hi,
Er hat Standart geschrieben. Wo gibt's kleine runde Steine? Ist Weibsvolk anwesend?
cu,
Andreas a/k/a MudGuard
Wie auch immer. Das dur Attribut kannst du nicht per CSS setzen. Wohl aber x, und du kannst Animierungsfunktionen aus CSS verwenden, um x zu animieren.
Ich habe es mit verschiedenen Browsern versucht, aber nur vier statische Rechtecke gesehen - nichts wurde animiert. Nur bei Angaben wie Farbe, Position u.s.w. konnte ich einfluss nehmen.
So oder so... Vielen Dank für deine Mühen! Du bist wenigstens einer, der auch Hilfe leisten würde - egal wie sinnig man es selbst findet.
Um eventuell beim Thema zu bleiben...
Hat jemand eine Idee, wie sich eine HTML-Zeile - z.B.:
<animate attributeName="x" from="100%" to=-160% dur='25s' repeatCount='indefinite'/>
dynamisch halten läßt?
In der ich aus einer anderen Datei stammende Variablen in Z.B. "from" oder "dur" einsetzen kann?
Bitte lasst uns nicht über Sinn oder Unsinn philosophieren!!!
Einfach - Ist es möglich und wenn ja... wie?
Hallo derSchweriner,
Bitte lasst uns nicht über Sinn oder Unsinn philosophieren!!!
Warum nicht??? Das ist der Mehrwert, den du hier bekommst!!!
Einfach - Ist es möglich und wenn ja... wie?
Definiere dynamisch!!!
Bis demnächst
Matthias
Hi Matthias,
Definiere dynamisch!!!
ich wüsste nicht wie ich es besser als in meinem ersten Beitrag erklären könnte.
Hallo derSchweriner,
ich wüsste nicht wie ich es besser als in meinem ersten Beitrag erklären könnte.
Du hast doch auf diesen Beitrag schon Antworten bekommen. Sind die nicht gut? Hast du Nachfragen dazu?
Bis demnächst
Matthias
Du hast die Beiträge sicher nicht gelesen.
Schade! Ich dachte, ich könnte hier auf eine recht einfache Frage eine schlüssige Antwort erhalten.
Ich danke euch allen aber dennoch für eure Mühen!
Hallo derSchweriner,
Du hast die Beiträge sicher nicht gelesen.
Das dur-Attribut kannst du nicht per CSS setzen.
Bis demnächst
Matthias
Das dur Attribut kannst du nicht per CSS setzen. Wohl aber x, ...
Mit "dur" habe ich wohl ein schlechtes Beispiel gewählt.
Ist es generell möglich in HTML Variablen zu übernehmen???
Einfacher läßt sich die Frage nun wirklich nicht stellen.
Hallo Schweriner,
diese "CSS Variablen" heißen korrekt custom properties und lassen sich ausschließlich in CSS mittels der var(--name) Notation nutzen.
Heißt: Werte von HTML Attributen kannst du damit nicht überschreiben. CSS Custom Properties lassen sich ausschließlich als Wert für CSS Eigenschaften nutzen.
Es gibt einige wenige HTML Attribute, die als Gegenstück eine CSS Eigenschaft haben. Dazu gehören ein paar SVG Attribute wie x, y, rx, oder ry - aber wie wir gesehen haben, ist das relativ neu und wird nicht von allen Browsern unterstützt. Der Name ist nicht unbedingt gleich. Die size-Eigenschaft von input type="text" wird z.B. von der CSS Eigenschaft width überschrieben. Rahmen und Zellabstand von Tabellen gibt's auch als CSS Eigenschaften. Frag mich jetzt aber nicht nach einer ausführlichen Mapping Tabelle...
Für Genauheimer: Es gibt ein, genau ein, HTML Attribut, in dem sich CSS Custom Properties einsetzen lassen: style. Was ja logisch ist, weil der Inhalt von style CSS Eigenschaften sind.
<!-- geht -->
<div style="--farbe:#c88">
<input type="text" size="40" style="background-color:var(--farbe)">
</div>
Eine andere Möglichkeit, HTML zu beeinflussen, besteht darin, mit JavaScript die Attribute zu überschreiben. Da kann man sich einen abbrechen, mit getComputedStyle die aktuell gültigen Eigenschaften holen, mit getPropertyValue die custom properties abfragen, etc etc.
Frage: Willst Du CSS custom properties verwenden, weil das für dich die sinnvollste Lösung ist? Oder nur, weil du glaubtest, man könne sie überall im HTML verwenden? Wenn Du serverseitig das HTML generierst, könnte es einfacher sein, die HTML Attribute dort passend zu erzeugen.
Rolf
Hallo Rolf,
vielen vielen Dank für deine gute und ausführliche Antwort!
Frage: Willst Du CSS custom properties verwenden, weil das für dich die sinnvollste Lösung ist? Oder nur, weil du glaubtest, man könne sie überall im HTML verwenden? Wenn Du serverseitig das HTML generierst, könnte es einfacher sein, die HTML Attribute dort passend zu erzeugen.
Für die eine spezielle Aufgabe sah ich keine andere Möglichkeit auf die unterschiedlichen Browsergrößen Einfluß zu nehmen.
Serverseitiges Generieren würde mir jetzt nur das Parsen per PHP einfallen. Aber auch da bekomme ich die Werte, die ich ändern muß, nicht variabel.
Mit PHP hätte ich auch als beste Möglichkeit gesehen - JS kann vom Nutzer deaktiviert sein und dann heißt es wieder mit Fallstricken zu arbeiten.
Sicher mache ich mir da viel zu viel Arbeit. Ich kann nicht immer auf jeden Browser und auf jede Auflösung rücksicht nehmen...
Hallo derSchweriner,
was willst du denn erreichen? Vielleicht gibt es ganz andere Herangehensweisen. Auch ich halte es für das sinnvollste, auf den Lauftext zu verzichten.
damit beim Betrachter der gleiche Effekt zu sehen ist.
Welches ist denn "der gleiche Effekt"?
Bis demnächst
Matthias
@@Rolf B
diese "CSS Variablen" heißen korrekt custom properties
„Der übelste Streich, den der Teufel je gespielt hat, war Menschen dazu zu bringen, CSS custom properties ‚Variablen‘ zu nennen.“ —Kitty Giraudel in einem Tweet
(in meiner Präse auf dem Webkongress Erlangen 2018 groß an die Wand geworfen)
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
diese "CSS Variablen" heißen korrekt custom properties
„Der übelste Streich, den der Teufel je gespielt hat, war Menschen dazu zu bringen, CSS custom properties ‚Variablen‘ zu nennen.“ —Kitty Giraudel in einem Tweet
(in meiner Präse auf dem Webkongress Erlangen 2018 groß an die Wand geworfen)
Ist allerdings extrem dumm gemacht. Wenn "CSS-Variable" so schlimm ist, hätte man von Anfang an die Notation var(…) vermeiden sollen. Design-Fehler.
@@kai345
Ist allerdings extrem dumm gemacht. Wenn "CSS-Variable" so schlimm ist, hätte man von Anfang an die Notation
var(…)vermeiden sollen. Design-Fehler.
Yep, das hätte wohl besser val(…) geheißen. Oder noch besser value(…).
Walen da Reute am Welk, die l und r velwechsern?
🖖 Stay hard! Stay hungry! Stay alive! Stay home!