Offene Fragen bezüglich HTML5 und CSS3

  • Guten Tag zusammen,


    ich hätte Fragen zu HTML5 und CSS3 die Fragen sind an Profis gerichtet.


    1. Frage zu <header> </header> ich habe keinen div erstellt sondern alles in <header> </header> gepackt. Hierzu die CSS


    Darf dies überhaupt so umgesetzt werden? Mein Bild hat eine Höhe von 91px und eine Breite von 251px. Die Höhe von 150px wird mit der Hintergrundfarbe: hsla ausgefüllt. Sollte überhaupt noch eine alternative Farbe gewählt werden bezüglich unterstützung von Browser, genau gesagt werden überhaupt noch alte Browser häufig genutzt?

    Ich habe keine Breite mitgegeben ist dies überhaupt erfoderlich (Es sollte sowieso die komplette Breite genutzt werden) oder führt dies bei manchen Browsern zu Problemen?

    Jetzt komme ich auf dass Element <header> </header> zu sprechen. Wie darf dies eigentlich genutzt werden? Ist ein <p> tag erforderlich?

    Hierzu einmal <header> <p> Test </p> </header> oder <header>Test</header> welche der beiden dürfen verwendet werden und was ist sinnvoll?

    Übrigens dass Webdesign sollte dann Responsiv sein.


    2. Frage


    Siehe mein Bild: https://www.amazon.de/clouddri…cPHpzCCuDPuaJKTbzDn7RFQdO alle 3 Boxen mit <section> </section> oder doch besser mit <div>? (Derzeit umgesetzt mit <div>). Da theoretisch 3 verschiedene Themen könnte theoretisch auch article verwendet werden. Da doch section ein wenig abweicht oder liege ich hier falsch?


    3. Frage


    Sollten alle dargestellten Elemente mit div umgesetzt werden oder können es auch die neuen HTML5 Elemente sein?

    Was ist erlaubt und sinvoll?


    4. Frage


    Flexbox ersetzt float ist dies wirklich so? Wer setzt es bereits ein, sehe immer noch viele mit float arbeiten.


    5. Frage.


    Brauche eine vertrauensvolle Quelle wo ich nachlesen kann welche CSS Befehle, HTML5 Befehle bei welchen Browser unterstützt werden.


    6. Frage


    Kennt jemand eine Software oder Tool wo man seine Seite am besten offline bei allen wichtigen Browsern testen kann (auch bei alten Browsern, neuen Browsern)?

    Wenn es um die Handyoptimierung geht an welche Handys sollte man sich den richten? (Statistiken)?


    Gibt es Statistiken bezüglich Browser PC und Handys?

  • Hallo


    Vorweg: Das Verständnis deiner Fragen erfordert teilweise intensives Hintergrundwissen. Das alles zu erklären füllt bereits ein Buch und sprengt damit den Rahmen eines Forums. Deshalb kann ich die Fragen "nur" fundiert beantworten.


    Code
    1. *
    2. {
    3. margin:0;
    4. padding:0;
    5. }


    Diese Angabe war, ist und bleibt unsinnig. Also komplett weglassen.


    Zitat

    Darf dies überhaupt so umgesetzt werden?


    Der Rest - ja.


    Zitat

    Mein Bild hat eine Höhe von 91px und eine Breite von 251px. Die Höhe von 150px wird mit der Hintergrundfarbe: hsla ausgefüllt.


    Alle Bilder sollten auf die Größe gebracht werden, mit der sie maximal angezeigt werden. Die Größe per CSS anzupassen hat sich als problematisch erwiesen und ist benutzerunfreundlich.


    Zitat

    Sollte überhaupt noch eine alternative Farbe gewählt werden bezüglich unterstützung von Browser, genau gesagt werden überhaupt noch alte Browser häufig genutzt?


    Ja. Dabei geht es aber nicht um die Browserunterstützung sondern den Fall, dass das Bild (aus welchen Gründen auch immer) nicht aufgerufen werden kann.


    Zitat

    Ich habe keine Breite mitgegeben ist dies überhaupt erfoderlich


    Nein. Überhaupt sollten alle unnötigen CSS-Angaben weggelassen werden.


    Zitat

    Wie darf dies eigentlich genutzt werden?


    Die Frage lässt sich nicht konkret beantworten: Deine Seite, deine Entscheidung.


    Anders sieht es aus, wenn du dich an die HTML- und CSS-Regel halten willst. Da ist der header-Element für bestimmte Angaben vorgesehen. Nachzulesen zum Beispiel bei


    https://html.spec.whatwg.org/m…s.html#the-header-element


    Ein header-Element muss aber nicht immer "oben" auf der Seite angezeigt werden. Genau wie ein footer-Element nicht immer unten angezeigt werden muss.


    Das header-Element kann und darf auch mehrfach auf einer Seite vorkommen, im Gegensatz zum Beispiel zum body- oder main-Element.


    Zitat

    Ist ein <p> tag erforderlich?


    Nach den HTML-Regeln: Ja. Text (und auch anderer Inhalt) darf sich nur im bestimmten Elementen befinden, wie zum Beispiel p, li, dt, dd, td und so weiter. Damit ist


    Code
    1. <header> <p> Test </p> </header>


    korrekt und sinnvoll.


    Zitat

    alle 3 Boxen mit <section> </section> oder doch besser mit <div>


    Das kommt ausschließlich auf den Inhalt an. Allgemein läßt sich die Frage schlicht nicht beantworten. Die HTML-Regel schreiben fest, das jeweils das passenste Element zu verwenden ist. Da das div-Element das allgemeinste (ich weiß - schlechtes Deutsch) ist, darf es nach den HTML-Regeln nur verwendet werden, wenn es keine anderen für den Inhalt vorgesehenen Elemente gibt. Auf deiner Seite kannst du es halten wie du willst.


    Zitat

    Sollten alle dargestellten Elemente mit div umgesetzt werden oder können es auch die neuen HTML5 Elemente sein?


    Es sollten sogar die aktuellen HTML5-Elemente verwendet werden. Wer heutzutage noch mit irgendwelchen Browserinkompatibilitäten kommt hat die Entwicklung der letzten 6, 7 Jahre schlicht verschlafen.


    Zitat

    Brauche eine vertrauensvolle Quelle wo ich nachlesen kann welche CSS Befehle, HTML5 Befehle bei welchen Browser unterstützt werden.



    Da hat sich "Can I Use" bewährt:


    http://www.caniuse.com/


    Zitat

    Kennt jemand eine Software oder Tool wo man seine Seite am besten offline bei allen wichtigen Browsern testen kann (auch bei alten Browsern, neuen Browsern)?



    Webseiten sollten nur auf Originalgeräten und mit Originalbrowsern getestet werden. Alles andere ist nur Augenwischerei.


    Zitat

    Wenn es um die Handyoptimierung geht an welche Handys sollte man sich den richten? (Statistiken)?


    Webseiten werden nicht nach Endgeräten erstellt. Das auch nur zu versuchen hat sich als Sackgasse erwiesen. Am sinnvollsten hat sich die Anzeige schlicht nach der Fenstergröße, hauptsächlich der Fensterbreite erwiesen.


    Gruss


    MrMurphy

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von MrMurphy ()

  • Hallo MrMurphy,


    vielen Dank für deine Antworten, hat mir weitergeholfen.


    Code
    1. *
    2. {
    3. margin:0;
    4. padding:0;
    5. }

    Wie soll dies dann gelöst werden?

  • In meinem Fall soll aber kein Abstand bestehen, jedoch besteht dieser durch dass Entfernen der Angaben.

  • Beim Browser (Firefox). Nehmen wir die genannte Grafik, mit der Höhe und Hintergrundfarbe wird die beim Browser von oben verschoben, links und rechts. Es wurden keine Angaben geändert. Woher hast du eigentlich die Info bezüglich Universalselektor?


    PS: Wo bleibt man eigentlich immer Up do date? Erneuerungen usw.

  • Ich glaube, ich muss mal kurz was klarstellen:


    Das Zurücksetzen von margin sowie padding aller Elemente ist nach der Meinung von MrMurphy unsinnig, womit er sicherlich auch zumindest teilweise recht hat.


    Man kann aber trotzdem nicht allgemein sagen, dass es komplett falsch ist, schließlich ist es letztendlich einfach nur eine andere Herangehensweise.


    Manche Entwickler vertrauen lieber auf die Defaults der Browser und ändern dann höchstens punktuell Dinge, während andere eben möglichst viel Kontrolle haben wollen und deswegen alle Abstände entfernen, damit man dann selber hingehen kann und diese, wie gewünscht, setzen kann.


    Das ist im Prinzip eine Glaubensfrage. Da muss also jeder selbst entscheiden, was er für besser empfindet.



    Up to date bleibt man am besten, indem man Blogs, Newsletter und Co liest. Im Idealfall englischsprachig.

  • Wie soll ich dies genau verstehen (defaults) dass man glaubt es ist alles in Ordnung?

    Kannst du ein paar Seiten empfehlen?

  • Ich verstehe deine Frage nicht ganz... Defaults sind die Standardwerte/Standard-Styles, die die Browser setzen, gemeint.


    Empfehlungen für Blogs sind immer schwer. Deutschsprachig wäre da vielleicht drweb.de und t3n.de, wobei letzteres eher allgemeine Tech-Nachrichten sind.

    Und englischsprachig fällt mir spontan nur css-tricks.com ein.