Ich saß gerade an einem Webdesign und dachte: "Hey, wäre es nicht schön, wenn wir CSS-Medienabfragen auf Blockelemente anwenden könnten (zB div , section , etc.)?" / p>

Im Ernst, wir könnten einige ziemlich beeindruckende flüssige Layouts erstellen, wenn wir diese Funktionalität hätten. In diesem Post verwende ich ein einfaches soziales Plugin, das ich in einer Seitenleiste auf einer meiner Seiten implementieren könnte, die basierend auf der Eltern-Div-Größe flüssig sein könnte. Das ist praktisch, damit ich mein Widget anpassen kann, egal ob es in einer 500px-Spalte oder einer 300px-Spalte implementiert ist, so dass ich keine spezifischen Stylesheets pro Layout programmieren muss, in dem es implementiert ist.

Das Design

Das HTML-Markup

Das CSS

Nun zum css-Element Media-Abfrageteil. Das ist KEIN gültiges CSS, aber das möchte ich erreichen. Im Wesentlichen nur eine css-Medienabfrage basierend auf einem übergeordneten Element anstelle der gesamten Browserbreite:

Dies hätte unendlich viele Vorteile und würde das Erstellen von Seitenblöcken, die auf mehreren Seiten implementiert werden, zum Kinderspiel machen. Jetzt, wo ich euch alle auf dem Laufenden bin, kommt meine Frage:

Implementiert dies durch einen iFrame eine plausible Lösung?

Mit plausibel meine ich:

• semantisch korrekt
• nicht nachteilig für SEO

Ein iframe kann ein eigenes Stylesheet haben und css-Medienabfragen basieren auf den iframe-Dimensionen, nicht auf den Browser-Dimensionen.

Meine Gedanken

Semantik

• Da das iframe-Element in HTML5 vorhanden ist und sogar Attribute hinzugefügt wurden, wird das iframe-Tag nicht mehr als veraltet angesehen.
• Das seamless-Tag würde wirklich dazu beitragen, dies zu einer realisierbaren Lösung zu machen, da Stile vom übergeordneten Dokument übernommen würden. Im Moment müssten wir diese Stile (oder injizieren sie) in die Seite neu aufnehmen.
• Der iframe könnte auch neu geladen werden, ohne dass ein Reload der gesamten Seite ausgelöst wird. Das bedeutet, dass automatisch aktualisierende Widgets ohne XHR ziemlich einfach wären.

SEO

• Ich bin mir ziemlich sicher, dass Google Leute, die iframes verwenden, nicht hasst, aber ich könnte mich da irren.
• Da die eigentlichen Seiteninformationen nicht in einem iframe und nur in diesen verpackten Blöcken enthalten sind, sehe ich keine Nachteile für SEO, da der Inhalt in ihnen nicht Teil des eigentlichen Seiteninhalts ist.
• Da die Seitenleiste keinen Einfluss auf den gesamten Seiteninhalt hat, könnte der Iframe zur Laufzeit dynamisch erstellt werden. Dies könnte der beste Weg sein, es zu implementieren, aber ich würde gerne Ihre Gedanken hören.

Nachteile

• Javascript würde benötigt, um den übergeordneten iframe auf den Inhalt der Seite zu ändern, wenn ein neues Layout auf die Seite angewendet wird.

Bevor Sie antworten, sollten Sie wissen, dass ich nie befürwortet habe, iframes für ANDERE zu verwenden als die, die einige Drittanbieter-Apps dafür verwenden, aber wenn ich mir das jetzt anschaue, sehe ich keinen Grund, sie nicht zu benutzen . Ich weiß, dass die Verwendung von css-Element-Medienabfragen PERFEKT wäre, aber ich sehe nicht, dass dies in nächster Zeit implementiert wird.

Ich hoffe, von euch allen mehr zu hören, da ich kein SEO-Experte bin und nicht oft (ifrs) Iframes benutze.