• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[HOW-TO/TUTORIAL] Kreis zeichnen mit CSS

mikdoe

Moderator
Fand ich interessant, was mittlerweile alles mit CSS geht.
border-radius: 50% ist die entscheidende Auszeichnung

HTML:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test</title>
</head>
<body>
	<style type="text/css" scoped>
	#test {
		border:		1px solid black;
		border-radius:	50%;
		width:		100px;
		height:		100px;
		vertical-align:	middle;
		display:	table-cell;
		text-align:	center;
	}
	</style>

<div id="test">Hallo Welt</div>

</body>
</html>
kreis.png
 
Ah, OK. Naja, es liegt einem halt nicht alles - ich hab zum Beispiel ziemliche Probleme mit RegExp's...
 
Wenn du noch


Code:
#test {
-webkit-animation: cssAnimation 1.000s 16 ease;
-moz-animation: cssAnimation 1.000s 16 ease;
-o-animation: cssAnimation 1.000s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}

hinzupackst, dreht es sich! :O

// 1.000 ist die durchlaufszeit
// 16 anzahl der wiederholungen (1 bis infinite (unendlich viele))

hach css bietet so viele tolle sachen :D
 
Der IE ist auch der missratenste Browser unter Gottes Sonne, ich würde ihn verbieten lassen wenn ich könnte!!!
 
Nö, das stimmt wirklich nicht. An anderer Stelle haben wir schon festgestellt, dass jeder seine Macken hat. Und der FF hat nicht weniger Macken als der IE! Bei mir ist es zumindest so, dass ich häufiger dem FF und Chrome nachlaufen muss als dem IE. Insbesondere bei Design Dingen.
 
Ich bin absoluter Chrome Verfechter, da ich den Anwendern vorschreiben kann mit welchem Browser sie arbeiten, baue ich meine ganzen Web-Applikationen für Chrome. Chrome kann einfach alles und das sauber, aber wir werden hier glaub ich Offtopic ;)
 
Nur weil wirs gerade hatten. Ein Element besteht aus <b>08:15</b>

Ich will 08:15 haben.

Mit IE kann ich ganz bequem mit .innerText arbeiten. Firefox: Nein, der will zwingend .innerHTML haben und ich muss den String anschließend selbst vom HTML befreien. Und das Weiterrechnen mit den Werten geht auch nicht einfach so. Im IE würde ein parseInt(xx,10) funktionieren, für den FF muss ich mit parseFloat() arbeiten, damit er addiert und nicht konkateniert.
Welcher Browser wäre jetzt besser? Und sowas hab ich ständig. Und immer laufe ich diesem besch.... Firefox nach. Da könnt ich manchmal aus der Haut fahren.
Meine Erfahrung besagt, wenn man es mit IE UND Firefox ans Laufen bekommt machen es auch alle anderen Browser wie gewünscht. Denn die beiden spiegeln beide Extreme wieder.
 
Mit IE kann ich ganz bequem mit .innerText arbeiten. Firefox: Nein, der will zwingend .innerHTML haben und ich muss den String anschließend selbst vom HTML befreien.
Falsch - .innerText ist NICHT STANDARTISIERT; stattdessen sieht das W3C .textContent vor (Document Object Model Core).
Und welcher Browser ist es hier wieder, der es (zumindest bis Version 9) nicht unterstützt? Der IE! Mittlerweile, mit IE 10/11, ist der IE tatsächlich genauso gut wie jeder andere Browser - in Version 8 und 9 war er aber unmöglich zu verleugnen wirklich ein Witz...

Und das Weiterrechnen mit den Werten geht auch nicht einfach so. Im IE würde ein parseInt(xx,10) funktionieren, für den FF muss ich mit parseFloat() arbeiten, damit er addiert und nicht konkateniert.
Kann nicht sein - parseInt ist exakt dasselbe wie parseFloat nur für Ganzzahlen...
The parseInt() function parses a string argument and returns an integer of the specified radix or base.
parseInt() - JavaScript | MDN


Meine Erfahrung besagt, wenn man es mit IE UND Firefox ans Laufen bekommt machen es auch alle anderen Browser wie gewünscht. Denn die beiden spiegeln beide Extreme wieder.
Ich bin Firefox-Fan, ja. Aber dennoch: den Firefox kann man nicht als "Extrem" bezeichnen. Der IE < 10 war ein Extrem. Aber Firefox? Nein. Schau dir mal beispielsweise den Browsersupport von den ganzen neueren JavaScript-Funktionen, HTML5-Features etc. an - es ist bis auf seeeehr wenige Fälle IMMER der IE, der die Ausnahme macht (mittlerweile aber zum Glück nicht mehr so krass wie in v8 und v9).
Wie gesagt - mittlerweile ist der IE echt benutzbar, aber
  1. IE < 10 war eine geradezu absurde Krankheit.
  2. Firefox kann man nicht als "Extrem" bezeichnen.
:boxing::)
 
Das Thema ist einfach zu genial, ich bitte den Exkurs zu entschuldigen. Wir trennen das später noch ab und verschieben es in Trash :)

Falsch - .innerText ist NICHT STANDARTISIERT; stattdessen sieht das W3C .textContent vor

Ja, einverstanden, mein Fehler. Nehmen wir mal diesen Code hier:
HTML:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test</title>
</head>
<body>
<div id="test"><b>11:56</b></div>
<script>
	var inhalt = document.getElementById('test').innerText;
	var f = inhalt.split(':');
	alert(parseInt(f[0],10)*60+parseInt(f[1],10)); // Preisfrage: bei welchem Browser geht als einzigem mal wieder keine Meldung mit "716" auf?
</script>
</body>
</html>

Schon merkwürdig, oder? Ich nutze (wahrscheinlich wieder einmal) etwas nicht Standardisiertes und der IE macht es genau wie erwartet (und wie es hier m.E. Sinn macht) und völlig ohne Probleme. Übrigens machen Chrome und Opera diesen Fall auch korrekt. Nur der FF tanzt wieder aus der Reihe und spuckt einen Fehler. Warum tut er das? Ist in genau diesem Fall eine Fehlermeldung sinnvoller als das Kommando in der einzigen hier sinnvollen Weise auszuführen? Was sollte ich denn mit .innerText anderes haben oder meinen wollen als .textContent?
Es gibt nichts anderes was ich hätte meinen können, so einfach ist das. Und wieder einmal musste ich dem FF hinterher laufen (hab das Problem durch Zufall nur entdeckt), weil er nur um des W3C Willens etwas abweist was inhaltlich überhaupt keinen Sinn macht, nur um des Abweisens wegen.

1.IE < 10 war eine geradezu absurde Krankheit
Meine Aussage bezog sich nur auf den 11er.

2.Firefox kann man nicht als "Extrem" bezeichnen
Doch, ich schon. Aber ich meine das nicht im Sinn von schlecht. Wie man an dem Beispiel hier sah lag es an mir. Komisch ist nur, dass mir verhältnismäßig oft solche Sachen passieren und der IE macht es immer so wie ich es erwarte und im Sinn habe. Völlig egal ob es um JS oder CSS geht. Mit dem IE bin ich ganz intuitiv immer so unterwegs wie erwartet. Bei Opera und Chrome funktionieren gefühlt die Hälfe der Fälle wie erwartet. Der FF hingegen macht in solchen Fällen nie das was ich erwarte, daher ist er für mich das andere "Extrem".

Und ist das jetzt ein Zufall? Jeder Fall ein Zufall? Ist meine Arbeitsweise MS lastiger oder woher kommt das? Man weiß es nicht.
Ich muss diese Fälle endlich mal irgendwo aufschreiben. Jedes mal, wenn es darum geht hab ich die Beispiele nicht mehr parat. Nehm ich mir mal für das nächste Jahr vor. ;)
 
Schon merkwürdig, oder?
Nein, da ist gar nichts merkwürdig daran - verwende sauberes JavaScript und arbeite korrekt mit .textContent, dann funktioniert es nämlich in allen Browsern.
Und was du damit meintest, dass du parseFloat() verwenden musst, verstehe ich nicht...

Ich nutze (wahrscheinlich wieder einmal) etwas nicht Standardisiertes und der IE macht es genau wie erwartet (und wie es hier m.E. Sinn macht) und völlig ohne Probleme. Übrigens machen Chrome und Opera diesen Fall auch korrekt. Nur der FF tanzt wieder aus der Reihe und spuckt einen Fehler. Warum tut er das?
Weil es nicht standardisiert ist. Und ohne verbindliche Standards des W3C würde das Web im Chaos versinken, was man ja hier dank IE-Besonderheiten sieht. Wenn du etwas nicht standardisiertes nutzt, KANNST DU NICHT ERWARTEN, dass es in anderen Browsern funktioniert - wäre ja noch schöner...


Ist in genau diesem Fall eine Fehlermeldung sinnvoller als das Kommando in der einzigen hier sinnvollen Weise auszuführen? Was sollte ich denn mit .innerText anderes haben oder meinen wollen als .textContent? Es gibt nichts anderes was ich hätte meinen können, so einfach ist das.
Entschuldige bitte, ist nicht abwertend gemeint; aber das ist jetzt wirklich Quatsch. Genauso könnte ich ja meinen, dass ich mit .text darauf zugreife (ist in meinen Augen auch völlig eindeutig und was sollte ich anderes meinen?) - geht natürlich nicht. Ich kann mir schließlich nicht meine eigenen Regeln machen, nur weil sie intuitiv sind...

Und wieder einmal musste ich dem FF hinterher laufen (hab das Problem durch Zufall nur entdeckt), weil er nur um des W3C Willens etwas abweist was inhaltlich überhaupt keinen Sinn macht, nur um des Abweisens wegen.
"nur um des W3C willens"???
ohne verbindliche Standards des W3C würde das Web im Chaos versinken
Und auch hier nochmal: genauso könnte ich mich wundern, dass .text abgewiesen wird, obwohl es "inhaltlich Sinn macht" - das ist wirklich absurd.

Doch, ich schon. Aber ich meine das nicht im Sinn von schlecht. Wie man an dem Beispiel hier sah lag es an mir. Komisch ist nur, dass mir verhältnismäßig oft solche Sachen passieren und der IE macht es immer so wie ich es erwarte und im Sinn habe. Völlig egal ob es um JS oder CSS geht. Mit dem IE bin ich ganz intuitiv immer so unterwegs wie erwartet. Bei Opera und Chrome funktionieren gefühlt die Hälfe der Fälle wie erwartet. Der FF hingegen macht in solchen Fällen nie das was ich erwarte, daher ist er für mich das andere "Extrem".
Wenn in Chrome, Opera und FF die Sachen bestenfalls in der Hälfte der Fälle funktionieren, läuft definitiv was schief ;)


Ich weiß immer noch nicht, was im IE funktionieren sollte, was im FF nicht funktioniert. Das einzige "Beispiel" war .innerText, und das ist eindeutig eine IE-Eigenheit, die keinerlei offiziellen Charakter hat.
Hingegen habe ich etliche Beispiele, was im IE NICHT funktioniert, dafür aber in sämtlichen anderen Browsern.
Schau dir mal beispielsweise den Browsersupport von den ganzen neueren JavaScript-Funktionen, HTML5-Features etc. an - es ist bis auf seeeehr wenige Fälle IMMER der IE, der die Ausnahme macht (mittlerweile aber zum Glück nicht mehr so krass wie in v8 und v9).
 
Und was du damit meintest, dass du parseFloat() verwenden musst, verstehe ich nicht...
Das war ein Folgefehler.

Genauso könnte ich ja meinen, dass ich mit .text darauf zugreife (ist in meinen Augen auch völlig eindeutig und was sollte ich anderes meinen?) - geht natürlich nicht. Ich kann mir schließlich nicht meine eigenen Regeln machen, nur weil sie intuitiv sind...
Das ist jetzt von dir Quatsch, denn ich erwarte ja nicht, dass Kommandos funktionieren die es nicht gibt!

Wenn in Chrome, Opera und FF die Sachen bestenfalls in der Hälfte der Fälle funktionieren, läuft definitiv was schief ;)
Du bist noch nicht darauf eingegangen, warum Chrome und Opera diese konkrete Sache hier ebenfalls richtig machen.

Ich weiß immer noch nicht, was im IE funktionieren sollte, was im FF nicht funktioniert.
Hab ich hier gezeigt. Drei große Browser machen es richtig, Firefox tanzt aus der Reihe.

Hingegen habe ich etliche Beispiele, was im IE NICHT funktioniert, dafür aber in sämtlichen anderen Browsern.
Kannst du ohne großen Aufwand 3 nennen? Aber IE 11 Beispiele bitte, nicht ältere IE.
 
Der IE ist auch der missratenste Browser unter Gottes Sonne, ich würde ihn verbieten lassen wenn ich könnte!!!
das ist schon mal großer käse

Das ist jetzt von dir Quatsch, denn ich erwarte ja nicht, dass Kommandos funktionieren die es nicht gibt!
dei eigenschaft innerText gibt es aber nicht im standard


Du bist noch nicht darauf eingegangen, warum Chrome und Opera diese konkrete Sache hier ebenfalls richtig machen.
"richtig machen" bedeutet hier, sie haben eine eigenschaft von MS übernommen, die MS schon ewig in ihrer DOM-implementierung hatte und auch sinnvoll war. dann setzten sich viele firmen zusammen um einen standard zu definieren und wie das manchmal so ist, kommt dann doch alles anders, da jede firma/organisation für sich irgendwelche ziele verfolgt und sie nennen die eigenschafft im standard textContent. jetzt kann man sich entscheiden ob man innerText neben textContent weiter unterstützt, oder man wirft innerText aus seiner implementierung. fein raus ist man, wenn man innerText noch nicht unterstützt hatte, dann muss man auch nicht auf abwärtskompatibilität achten und nur textContent anbieten

Hab ich hier gezeigt. Drei große Browser machen es richtig, Firefox tanzt aus der Reihe.
ja, die "großen" Browser machen es richtig und haben eine standard eigenschaft textContent. das manche eine nicht standard eigenschaft innerText anbieten ist egal, da die ja keiner verwendet, aus eben diesem grund

Kannst du ohne großen Aufwand 3 nennen? Aber IE 11 Beispiele bitte, nicht ältere IE.
er meint funktionalität, die mal in den standard kommen könnte. Web Components zum beispiel, ist im chrome drinn, einfach so, im FF muss man es freischalten, der IE hat es nicht
das ist aber quatsch. die ganze herangehensweise bei html5 ist meiner meinung nach großer quatsch. da wird haufen zeug als vermutlich mal standard spezifiziert, von den browsern teilweise implementiert, wieder gestrichen und das chaos ist perfekt.
Web SQL/File API/...
ein standard gehört spezifiziert. und dann implementiert man diesen. aus
 
Zurück
Oben