container soll sich der Größe des Images anpassen

[Hannes Weninger]

Hallo,

ich hab mal dieses JSFiddle Beispiel gemacht: JSFiddle. Ich habe ein Backgroud- Image gesetzt und der äußere Rahmen soll sich dem Image anpassen. Weiß jemand wie ich das am Besten machen kann?

Danke! Hannes

[Matthias Apsel]

Hallo Hannes Weninger,

ich hab mal dieses JSFiddle Beispiel gemacht: JSFiddle. Ich habe ein Backgroud- Image gesetzt und der äußere Rahmen soll sich dem Image anpassen.

Das geht mit CSS meines Wissens nicht.

Falls ich das richtig verstanden habe: Das Element soll sich in seiner Größe nach seinem Hintergrundbild richten, nicht etwa umgekehrt. Dafür wäre background-size: cover dein Freund.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Hannes Weninger

ich hab mal dieses JSFiddle Beispiel gemacht: JSFiddle.

Zum Markup:

<div class="container">
			
			<section class="main">

class="main"?? Zur Auszeichnung des Hauptinhalts dient das main-Element. [Spec]

Ein div-Container außenrum sollte nicht erforderlich sein, da es mit html und body bereits zwei solche gibt.

						<div class="ch-item ch-img-1">
							<div class="ch-info">
								<h3>Use what you have</h3>

Wofür sollen die div-Elemente gut sein, die gar nichts gruppieren?

Es sieht auch nicht so aus als wäre „Use what you have“ eine Überschrift.

Zum Stylesheet:

				-webkit-transition: all 0.4s ease-in-out;
				-moz-transition: all 0.4s ease-in-out;
				-o-transition: all 0.4s ease-in-out;
				-ms-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;

Die Vendor-Präfixe -moz-, -ms- und -o- sind unsinng. (Die letzten beiden waren es wohl schon immer.) Alle diese Browser unterstützen transition präfixfrei. Lediglich -webkit- könnte für alte Android-Browser noch sinnvoll sein.

Warum all, wenn nur die Änderung von transform animiert werden soll?

Die Animation der Änderung von box-shadow ist aus Performanz-Sicht nicht so eine gute Idee.

				-webkit-transform: scale(0);
				-moz-transform: scale(0);
				-o-transform: scale(0);
				-ms-transform: scale(0);
				transform: scale(0);

Ähnlich hier: -moz- und -o- sind unsinng.

				-webkit-backface-visibility: hidden;

Die präfixfreie Angabe der backface-visibility-Eigenschaft fehlt.

LLAP 🖖

[Matthias Scharwies]

Servus! @Gunnar Bittersmann

<div class="container">
			
<section class="main">

class="main"?? Zur Auszeichnung des Hauptinhalts dient das main-Element. [Spec]

Ich habe den Wiki-Artikel zum main-Element noch einmal geändert. Gibt es gute Quellen, welche ARIA-Attribute noch nötig, bzw. mittlerweile überflüssig sind (z.B. <nav role="navigation">), damit man diesen Wiki-Artikel aktualisieren kann?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Gibt es gute Quellen, welche ARIA-Attribute noch nötig, bzw. mittlerweile überflüssig sind (z.B. <nav role="navigation">) […]?

Die Tabelle in HTML Accessibility API Mappings 1.0, §4.4 (Editor’s Draft).

Das main-Element war das letzte, was noch zum Standard hinzugekommen ist. Dafür, dass role auch für dieses mittlerweile überflüssig ist, hab ich die beste Quelle.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Gunnar Bittersmann

Die Tabelle in HTML Accessibility API Mappings 1.0, §4.4 (Editor’s Draft).

Hatte beim Suchen nach zugänglichen DropdownMenüs schon irgendwo gelesen, dass diese Tabelle sehr unübersichtlich ist.

Habe die Links in den WAI ARIA-Artikel eingebaut.

Vielen Dank! + Herzliche Grüße

Matthias Scharwies

[Orlok]

Hallo Matthias

Die Tabelle in HTML Accessibility API Mappings 1.0, §4.4 (Editor’s Draft).

Hatte beim Suchen nach zugänglichen DropdownMenüs schon irgendwo gelesen, dass diese Tabelle sehr unübersichtlich ist.

Ich meine mich erinnern zu können, dass ich hier erst kürzlich ARIA in HTML verlinkt hatte…

„This specification defines the web developer rules (author conformance requirements) for the use of [wai-aria-1.1] attributes on [HTML51] elements.“

Dazu gibt es diese übersichtliche Tabelle.

Viele Grüße,

Orlok

[Matthias Apsel]

Hallo Orlok,

Dazu gibt es diese übersichtliche Tabelle.

Und inzwischen auch diese als Arbeitsgrundlage.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Hannes Weninger

Ich habe ein Backgroud- Image gesetzt und der äußere Rahmen soll sich dem Image anpassen. Weiß jemand wie ich das am Besten machen kann?

Nicht.

(Das bezieht sich auf „am besten machen“, nicht auf „weiß jemand“.)

Die Größe einer Box kann sich nach deren Inhalt richten. Ein Hintergrundbild ist kein Inhalt, sondern Verzierung.

Ist das Bild bei dir kein Inhalt? Wenn doch: <img src=… alt=…/>

LLAP 🖖