Beiträge von Yosh

  • IE10 mit HTML/CSS erkennen

    Hi.
    Genau so hab ich das gemacht.

    Ich hab aber nun nochmals etwas umgeschwenkt und doch JavaScript mit dazu genommen.
    Dort gibts mehrere zuverlässige Methoden, um IE10 oder älter herauszufiltern und auch noch weitere Feature Detections zu machen.

    Ohne aktiviertes JavaScript bekommt man dann nur das Basis-Stylesheet (Inklusive einer Anzeige, dass JS benötigt wird).
    Das Basis-Stylesheet ist sozusagen ohne jeglichen Schnickschnack, so dass es selbst auf richtig alten Browsern lesbar bleibt. (Defacto ein einfaches 1-Spalten Layout, in dem auch noch jeglicher optionale Content mit display: none ausgeblendet ist)
    Das eigentliche Stylesheet wird dann erst mit DOM Zugriff durch JS eingefügt.

  • IE10 mit HTML/CSS erkennen

    Hi.

    Ich hab nun eine noch viel einfachere Lösung gefunden.

    Im HTML Dokument, wo Flexbox verwendet wird, wird eine zusätzliche Box oben eingefügt.

    HTML
    <div id="wrapper" class="flexbox-vertical">
        <div id="warn">            Sie verwenden einen Browser, der Flexbox nicht unterstützt!        </div>
        ... weitere Flexbox Divs
    </div>

    Im CSS wird folgendes eingefügt:


    Durch dieses Vorgehen werden nicht nur alte IEs die Meldung zeigen, sondern auch alle anderen Browser, die kein Flexbox können, weil sie das DIV ganz normal als Blockelement anzeigen.
    Browser, die @supports unterstützen, zeigen nichts an, weil display:none gesetzt wird.

    Der IE11 unterstützt zwar kein @supports, würde somit die Meldung eigentlich anzeigen, aber weil er flex: 0 1 0px; auswertet, wird die Box eben auf 0px verkleinert.
    Genau hier wäre dadurch dann aber noch die Möglichkeit gegeben, eine weitere Box einzubauen, die speziell für IE11 User gedacht ist und für einen Umstieg auf einen neueren Browser wirbt.
    Statt flex: 0 1 0px muss man dann z.B. flex: 0 0 20px verwenden. (Der IE11 wird zwar noch von mir unterstützt aber nicht empfohlen)


    Weiterhin ist es auch möglich, verschiedene "optionale" Divs mit einer Höhe von 0px auszustatten und overflow:hidden zu setzen, und dann erst über Flexbox eine Höhe zu geben wie gewünscht zu positionieren. Dann sieht man die bei alten Browsern erst gar nicht.
    Nur die notwendigsten Blöcke, wie z.B. den eigentlichen Inhalt, lässt man mit Defaultwerten anzeigen. Je weniger "Optionales" gezeigt wird, desto weniger Probleme gibts bei den alten Browsern.


    LG und einen guten Rutsch ins neue Jahr.

  • IE10 mit HTML/CSS erkennen

    Hi.

    Danke für Dein Beispiel. Ich habe es mal ein wenig erweitert.
    Alte IE Versionen bis 9 werden über Conditional Comments erkannt.
    IE10 wird wie bei dir im Beispiel erkannt, wobei ich noch einen Hack (das \9) eingebaut habe, damit IE11 die Meldung nicht anzeigt.

    Bei IE11 wird nur ein Hinweis angezeigt, der den User zum Wechseln animieren soll.
    IE11 Support ist "Gerade noch so" mit im Boot. (Flexbox ist da Buggy, da müssen schon Workarounds eingesetzt werden)

    Und warum das ganze?
    Ziel des Ganzen ist, bei IE älter als 11 dann ein stark vereinfachtes CSS auszuliefern, welches mehr oder weniger nur einen "Textmodus" ohne Schnickschnack und ohne die interaktiven Seitenelemente darstellt.
    Und da gerade in Firmen noch manchmal alte IE Versionen im Einsatz sind, aber dann oft auch JS gesperrt ist, soll die IE Erkennung auch ohne JS auskommen.
    Bestes Beispiel: Meine Firma. Die nutzen heute stellenweise noch Windows XP zusammen mit IE 8. Und natürlich ist JS per Gruppenrichtlinie ausgeschaltet.

  • IE10 mit HTML/CSS erkennen

    Hi.
    Danke, das funktioniert zwar, aber leider auch beim IE11.
    Eigentlich suche ich etwas, was nur bis einschließlich IE10 greift, als Ersatz für die nicht mehr vorhandenen Conditional Comments.

    Ansonsten muss ich es wohl Serverseitig lösen, um bei allen IE Versionen außer der aktuellsten dem User eine entsprechende Meldung auszugeben, dass der Browser nicht unterstützt wird.

  • Neue HTLM5 Elemente wie z.B. main und alte Browser

    Hi.

    Der Gedankengang war folgender:
    Die Startseite / FAQ sollte relativ abwärtskompatibel sein, damit die Leute in der FAQ wenigstens noch lesen können, was technisch benötigt wird.

    Ich habe das Problem, dass das Layout in sich zusammenfällt und die Elemente sich gegenseitig überdecken, wenn man mit einem alten Browser kommt, weil die Browser weder Flexbox können noch die "Fallback" Höhenangaben auf den neuen HTML5 Elementen verwenden. Dies läßt sich nur durch HTML5Shiv oder zusätzliche DIVs beheben.

    Das Problem tritt aber auch nur bei IE auf. Alte Versionen von Firefox (z.B. die 3.6) zeigen zumindest noch den Text.
    Ich kann höchstens noch hingehen und mit Conditional Comments und meta http-equiv="refresh" die alten IEs auf eine Fehlerseite umleiten.
    Den IE10 erwische ich damit aber schon nicht mehr. Da müsste man dann zumindest dafür sorgen, dass die Leute die FAQ noch lesen können.

    Beim internen Bereich hat Internet Explorer sowieso verloren weil da ES6 verlangt wird. Aber da meckert dann schon die Software ansich mit Einblendung einer Fehlerseite.

  • Neue HTLM5 Elemente wie z.B. main und alte Browser

    Hi.

    Ich habe auf meiner Webseite nun die neuen HTML5 Elemente wie z.B. <header> <main> <footer> verwendet.

    Damit es in älteren Browsern funktioniert, habe ich die Elemente mit CSS als Blockelement deklariert. (Display: Block)

    Zusammen mit dem Body Element dienen sie auch zur Erzeugung des Flexbox Grundgerüst bei den neueren Browsern.

    Ich habe aber darauf verzichtet, weitere CSS Formatierungen wie z.B. Größenangaben, Hintergrundfarbe, etc, direkt auf dem Element durchzuführen, weil ältere Browser diese Styles dort nicht zuweisen und die Seite dann beschissen aussieht. Dafür habe ich dann nochmal extra einen inneren DIV eingebaut, auf dem die Styles dann angewendet werden. Das klappt auch bei alten Browsern.
    Auf den HTML5Shiv habe ich verzichtet, da dieser JS benötigt.

    Nun habe ich es so weit geschafft, dass die Seite sogar noch auf dem IE 6 ganz passabel aussieht und lesbar bleibt.

    Was haltet ihr davon, die neuen HTML5 Elemente zu nutzen, für die Strukturierung, dann aber nochmals extra DIV Container für das Design zu nutzen, um eine größere Kompatibilität zu erreichen?
    Oder würdet ihr darauf heutzutage ehr verzichten?

    Ich dachte, die Startseite, Info-Seite und FAQ sollte auf jeden Fall immer lesbar bleiben.
    Für den internen Bereich wird hingegen etwas eingebaut, so dass man mit alten Browsern gar nicht erst einloggen kann wenn sie Mindestanforderungen nicht erfüllen.

  • 2 oder 3 Spalten Layout - Was ist derzeit "in"?

    Hi.

    Das heißt, du würdest erst mal nur den Kopf- Hauptnavigation und Fußbereich machen der überall gleich ist?

    Und dann gar keine wirklich ins Template eingebauten Sidebars, sondern diese in die Content Dateien einbauen so wie es gerade sinn macht?

    - - - Aktualisiert - - -

    Praktisch heißt das, dass das Template relativ einfach gestickt wäre.
    Denn die wirklich festen Seiten Bestandteile bekomme ich in einem 1 Spalten Layout prima hin welches auch gar kein Problem hat von ca 400 bis 2000 px Breite "gezogen" zu werden.

    Die Problematik mit dem "Responsiven Layout" würde sich dann auf die Content Dateien verlagern. Allerdings könnte ich da dann wirklich Contentabhängig die Positionierungen machen.
    (Sprich, Sidebar ja /nein, und fließen unter oder über den Content dann Contentbezogen machen)

  • Flexbox CSS Muster mit Support für ältere Browser, bitte um Verbesserungsvorschläge

    Hab mal verschiedene Verfahren zur Layout-Erzeugung ausprobiert.
    Fluides 2 Spalten Layout mit max-width und Sticky Footer.
    -Floats
    -Margins und negative Margins
    -Position
    -Flexbox

    Wenn man die alten Flexbox Schreibweisen einspart, ist das Flexbox Layout am stabilsten und hat das aufgeräumteste CSS.
    Lediglich für den IE11 muss man noch ein bisschen frickeln.
    Alle anderen Methoden erforderten deutlich mehr Frickelei, sind aber auch relativ weit abwärtskompatibel.

    Würdet ihr heute Flexbox ohne Prefixes nutzen?

  • Flexbox CSS Muster mit Support für ältere Browser, bitte um Verbesserungsvorschläge

    Hi.

    Also die alten Flexbox Schreibweisen hab ich auch durch ein Autoprefixer-Onlinetool bekommen und in mein CSS eingebaut.

    Ein Fallback-Layout habe ich faktisch schon (Und zwar das erste Layout was ich überhaupt gemacht habe). Und zwar werden dort alle Bereiche einfach mit 100% Breite untereinander mit horizontaler Navigation in einem 1-Spalten-Layout dargestellt.

    Das Layout ist sogar Responsiv, weil ich überwiegend mit % Angaben statt mit px gearbeitet habe. (Ausnahmen sind nur manche Max und Min Angaben in px)
    Bei großen Bildschirmen wird einfach mit "max-width: 1200px" und "margin: 0 auto" zentriert, damit die Textzeilen nicht zu lang werden bzw eine "Obergrenze" für die Layoutausdehnung gesetzt wird.

    Einen echten "Sticky Footer" gibts nicht. Aber da Kopfzeile und Navigation mit height: 10% und der Wrapper mit min-height: 75% gemacht wurden, ist der Footer ohne größeren Aufwand doch immer im unteren Bereich der Seite angesiedelt.

    Nun wollte ich halt auf ein Responsives 2 oder 3 Spalten Layout gehen, damit bei Desktop-Bildschirmen oder neueren Mobilgeräten mit hoher Auflösung im Landscape Modus eine Seitenleiste angezeigt werden kann, wo sonst nur Weißraum wäre.

    Und dafür erscheint mir Flexbox am Besten geeignet.
    Das Gefrickel mit den Floats will ich mir gar nicht erst antun.
    Dann würde ich ehr noch mit "position: absolute" oder so arbeiten und einzelne Divs per Media Querys + absoluter Positionierung auf den Weißraum rechts/ links "umsetzen".

    Was hälst du von Flexbox für die Layouterstellung? Oder würdest du ein 1 Spalten Layout nehmen und die Weißräume per Media Query + Position Absolute füllen?

    LG

  • Flexbox CSS Muster mit Support für ältere Browser, bitte um Verbesserungsvorschläge

    Hi.

    Ich hab mal eine CSS Datei gebastelt, um Flexbox als zentrale Layoutbasis für ein fluides Layout mit Sticky Footer zu nutzen.
    Anstatt Dinge wie Floats, Inline-Box oder absolute/relative Positionierungen und negative Margins zu nutzen.

    Hierbei soll eine größtmögliche Abwärtskompatibilität erreicht werden so dass auch die alte Flexbox Syntax eingebaut wurde.

    Mit einbau der alten Flexbox Syntax kann man ja schon sehr viel abdecken: http://caniuse.com/#feat=flexbox

    Browser, die noch nicht mal die alte Flexbox Syntax unterstützen, sollen hingegen unberücksichtigt bleiben, und mehr oder weniger "Plain Text" zeigen. Also sollen dafür keine Fallbacks mit Floats oder so realisiert werden.
    Wirklich relevant wäre das ohnehin nur bei alten IE Versionen, bei denen dann sowieso noch viel mehr im Argen liegt und man für eine Kompatibilität viel Arbeit investieren müsste.

    Hier mal das CSS. Über Verbesserungsvorschläge freue ich mich.

    Gruß

  • Session ID "unsichtbar" übertragen, ohne JS und ohne Cookies

    Hi.

    Es gibt ja die Cookie Richtlinie.
    Um eine lästige "Cookie-Benachrichtigung" auf der Startseite zu verhindern, wollte ich auf den allgemein zugänglichen Seiten komplett auf Cookies verzichten.
    Stattdessen wird erst bei einem Log-In das Cookie gesetzt. Ein Cookie-Hinweis erscheint deswegen erst auf der Register / Login Seite. Da aber auch nicht als "Popup" bzw "Overlay" sondern einfach in Textform zusammen mit anderen Hinweisen.

    Allerdings kann man auf den allgemein zugänglichen Seiten auch schon das Layout wählen zwischen Day und Night (Helles / Dunkles Layout) und man kann zwischen Deutsch und Englisch umschalten.

    Standard ist "Helles Layout" und Deutsch.

    Wie kann man aber nun ohne Cookies und ohne von PHP automatisch an die URL angehängte Session ID verschiedene Sachen merken?

    Gewähltes Layout und Sprache könnte man im URL Pfad codieren. Z.B. http://example.com/de/hell/ und so scheinbar 4 verschiedene Seitenvarianten machen. (de/hell, de/dunkel, en/light, en/dark) (Per URL Rewriting kann man es aber auf 1 PHP Script umlenken)
    Sollen weitere Merkmale so verarbeitet werden, wird das aber schnell ziemlich groß.

    Aber könnte man nicht auch hingehen, und jeden internen Link so präparieren, dass der Wert eines Hidden Inputs immer per Post mitgesendet wird? Sprich, dass man zwar eine Session verwendet, diese aber nicht sichtbar als URL Get Parameter, sondern unsichtbar per POST übertragen wird?

    Und das möglichst ohne JavaScript, denn Javascript könnte man ja auch deaktivieren und es soll ja eine absolute Fallback-Lösung werden.

  • Mobile First für neues Projekt zu empfehlen?

    Hi.

    Ich bin gerade in der Konzeptphase für ein neues Webprojekt und fleissig am experiementieren und lernen.
    Ich möchte auf jeden Fall "Zeitgemäße" Technologien verwenden. Also HTML5, CSS3, Flexbox. Und es soll ein Adaptive/Responsive Layout werden.

    Ich möchte aber auch nicht massig Zeit/Ressourcen in die "Abwärtskompatibilität" stecken. Zunächst war ich auf dem Standpunkt, das Thema Abwärtskopatibilität komplett außen vor zu lassen und stur auf aktuellem Stand zu entwickeln. Aber ich habe in der Zielgruppe eine Analyse gemacht. (Bin bei einem ähnlichen Webprojekt wie bei dem von mir geplanten als Mod und Admit mit im Team)
    Bei der Zielgruppe handelt es sich überwiegend nicht um "junge Leute" oder Technikfreaks, die oft mit der neuesten Technik unterwegs sind, sondern ehr um die Generation 30+.
    Da wird auch gerne mal noch das ein oder andere etwas ältere Gerät genutzt. Teilweise sogar noch Windows XP. Aber dann nicht mit IE, sondern meißt Firefox.
    Es werden aber "ältere Tablets" verwendet, iOS 6.x und Android 4.x User sehe ich durchaus noch.
    Erstaunlich ist, dass der Anteil von Tablet und Smartphone Nutzung innerhalb der Zielgruppe schon bei über 40% liegt. Und das, obwohl die Seite keine Mobilvariante bzw Mobiloptimierung hat, sondern vom Layout und technisch ungefähr auf dem Stand von vor 10 Jahren ist und ein 1000px Fixed Layout genutzt wird (Gebaut für WXGA Bildschirmauflösungen). Und das passt zufällig schon für viele Mobilgeräte fast perfekt.

    Nun ist es so, dass ich beim Ersten Versuch mein Layout ganz klassisch gestaltet habe.
    Ich habe ein fluides "Holy Grail" Layout gebastelt (3 Spalten + Header und Footer). Allerdings ist das nicht so dolle gewesen. Und es war alles andere als gut bei extrem kleinen oder extrem großen Bildschirmauflösungen, da es sich nicht gut anpassen ließ. Entweder verbrauchten die Sidebars kostbaren Platz und für den Inhalt war kaum noch was über. Oder die Zeilen wurden extrem lang, bzw man hatte an den Seitenrändern große weiße Flächen wenn man es begrenzte.

    Die nächste Sufe war dann, dass ich 2 Layouts gestaltete.
    Ich habe ein Layout mit Flexbox gemacht, welches aus Header, Footer und 5 Spalten bestand. Bei großen Auflösungen konne ich die "Weißen Flächen" am Rand durch Spalte 1 und 5 mit irgendwas füllen. Bei mittleren Auflösungen rutschen Spalte 1 und 5 nach Unten über den Footer.
    Für Kleine Auflösungen habe ich ein zusätzliches Layout gemacht, bei dem alles einfach untereinander angeordnet war, und ich auch auf einige Dinge verzichtete. Das Layout hatte ich auch ohne Flexbox gemacht, sondern einfach nur alle Boxen mit Width=100% versehen und den normalen Elementfluss vom Browser genutzt. Umgeschaltet wurde per Media Query.

    Das abgespeckte "Mobil-Layout" lief sogar Herunter bis Firefox 3 und IE 6 problemlos, obwohl ich nicht wirklich auf Abwärtskompatibilität geachtet hatte.
    Also wurde das Mobil-Layout zum Basis-Layout erkoren, und diente nicht nur als Mobillayout, sondern auch als "Kompatibilitätslayout".

    Für größere Geräte und neue Browser wurde nachträglich umgeschaltet auf die andere CSS Datei. Das hatte ich mit Media Querys gemacht. Das war auch eine gute "Browserweiche", Alte Browser die keine MediaQuerys kennen, blieben einfach auf dem Basis-Layout.


    Nun bin ich an einem Punkt, wo ich darüber nachdenke, das 3 / 5 Spaltenlayout komplett über den Haufen zu werfen und das Layout zu entschlacken, so dass eigentlich nur noch ein großer Inhaltsbereich und eine minimalistische Navigation da ist. Kein "Riesen Navi-Menü" mehr usw. Vieles, was sonst eigentlich im Navi-Menü wäre, kann man ja auch als Link direkt im Content verpacken.
    Und dann alles, was zusätzlich angezeigt werden soll, in einzelne Kacheln verpacken, die je nach Gerät an eine passende Stelle fließen.

    Ich würde also quasi das machen, was oft als Mobile-First Taktik verkauft wird.

    Durch geschickte Anordnung im HTML Quelltext kann man es dann sogar so anstellen, dass, wenn kein Flexbox unterstützt wird, durch den normalen "Browser Elementfluss" trotzdem eine brauchbare Anordnung entsteht. Also Abwärtskompatibilität ohne großes Gefrickel frei Haus.
    Ich habs sogar so weit geschafft, dass die Seite sogar noch unter dem Urgestein IE5 problemlos lesbar ist. (Beim Holy-Grail Layout ist das alles deutlich schwerer)


    Nun stelle ich mir natürlich die Frage, ob es nicht ohnehin sinnvoll ist, bei einem neuen Webprojekt gleich von vorne herein die Mobile First Taktik zu verfolgen.
    Es würde vieles sehr viel einfacher machen. Es würde eine Menge Arbeit und Aufwand sparen, da man dann automatisch vieles sehr viel simpler umsetzt, und damit einige Probleme, die bei komplexen Layouts entstehen, erst gar nicht auftreten. Und es wäre ganz nebenbei auch noch Zeitgemäß.

    Was meint ihr?