[FloB]

Hi,

ich suche einen einfachen Weg um unwilligen Browsern "border-radius" beizubringen. Die Lösungen, die ich bisher gefunden habe sind alle sehr aufwendig und / oder ich blicke nicht durch (z. B. curvyCorners).

Die Lösung muss nicht sonderlich schön, aber korrekt (gemäß Richtlinien) sein (z. B. nicht Fragen, welchen Browser ich vorliegen habe, sondern ob die gewünschte Funktion zur Verfügung gestellt wird).

Meine Vorstellung vom idealen Ablauf wäre folgender (Pseudocode) :

onDOMReady.do:
if (!property.exists('border-top-right-radius' && !property.exists('-moz-border-radius-topright')) do:
   arrElements = getElementsByClass('rounded');
   foreach(arrElements as objElement) do:
      addCorner(objElement, 'top-right');
      addCorner(objElement, 'bottom-right');
      /* … */
   done;
done; done;

function addCorner(objElement, strCorner) do:
   objCorner = objElement.createChild('div');
   objCorner.add = magicallyAddCornerOverlay(strCorner);
done;

magicallyAddCornerOverlay() sollte etwas erstellen, was dann in die jeweilige Ecke "geklebt" wird (position:absolute; – auch per JS festgelegt) und das darunter liegende Element teilweise verdeckt. Die Farbe des Aufsatzes kann meinetwegen noch per Parameter übergeben werden. Möglich wäre auch, dass das Ecken-"Bild" auch einfach vom Server als Bilddatei geladen wird (lieber hätte ich es aber komplett beim Client generiert).
Am Besten wäre noch eine Integration mit mootools (wenn es sinnvoll ist), um Redundanz zu vermeiden.

Hat jemand eine Lösung schon parat? Oder kann mir JS-Laien einer unter die Arme greifen soetwas selber zu schreiben?

Vielen Dank im voraus!

So long,
FloB

[FloB]

So, das hat mir jetzt keine Ruhe gelassen während dem Arbeiten (verdammte Prokrastination). Ich habe mal das Wichtigste geschrieben (als totaler JS- & mootools-DAU) :

$each($$('.rounded'), function (elParent) {
	elParent.inject(new Element('img', 
		{
			'src': 'curve-tr.gif',
			'styles': 
				{
					'position': 'absolute',
					'top': '0px',
					'right': '0px'
				}
		})
	);
	elParent.inject(new Element('img', 
		{
			'src': 'curve-br.gif',
			'styles': 
				{
					'position': 'absolute',
					'bottom': '0px',
					'right': '0px'
				}
		})
	);
	elParent.inject(new Element('img', 
		{
			'src': 'curve-bl.gif',
			'styles': 
				{
					'position': 'absolute',
					'bottom': '0px',
					'left': '0px'
				}
		})
	);
	elParent.inject(new Element('img', 
		{
			'src': 'curve-tl.gif',
			'styles': 
				{
					'position': 'absolute',
					'top': '0px',
					'left': '0px'
				}
		})
	);
});

Ich habe es noch nicht getestet (das verschiebe ich auf später, muss noch dringend anderes machen). Hat jemand da schon Anmerkungen / Tipps / Anregungen / Ideen / etc.?