Offene Fragen bezüglich HTML5 und CSS3

[hume1991]

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

*
{
    margin:0;
    padding:0;
}
header
{
    background:url(img/testbild.png)no-repeat 25px 25px;
    height:150px;
    background-color:hsla(360,0%,83%,0.2);
   
       
}

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?

 

[sheel]

Hi

Thema 1:

Darf dies überhaupt so umgesetzt werden?

Warum nicht?

Sollte überhaupt noch eine alternative Farbe gewählt werden bezüglich unterstützung von Browser

Kommt drauf an was du unterstützen willst...

genau gesagt werden überhaupt noch alte Browser häufig genutzt?

https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tables
https://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1

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?

Lässt sich ohne den Rest schwer sagen

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?

Nein und beide.

(Vieles ist einfach suchbar).

Thema 2: Seh leider kein Bild.
Man kann Bilder auch hier im Forum raufladen...

Thema 3:

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

Was ist erlaubt und sinvoll?

Erlaubt ist beides, sinnvoll... naja, die neuen zusätzlichen Möglichkeiten ohne Grund nicht zu verwenden ist nicht wirklich sinnvoll.

Thema 4:

Flexbox ersetzt float ist dies wirklich so?

Nein. Flexbox ersetzt einen großen Anwendungsfall von float (und ermöglicht weitere Sachen die nichts mit float zu tun haben). Die anderen Anwendungsfälle von float gibts noch.

Thema 5:
http://caniuse.com/
(allerdings ist die Googlesuche nach "caniuse something" oft hilfreicher als die Übersichtsseiten ... meiner Meinung nach)

Thema 6:
Statistiken in den Links von Thema 1.

Rest:
http://t3n.de/news/cross-browser-testing-501579/
https://www.browserstack.com/
http://mashable.com/2014/02/26/browser-testing-tools/
...

 

[hume1991]

Hi

Thema 1:

Warum nicht?

Kommt drauf an was du unterstützen willst...

https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tables
https://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1

Lässt sich ohne den Rest schwer sagen

Nein und beide.

(Vieles ist einfach suchbar).

Thema 2: Seh leider kein Bild.
Man kann Bilder auch hier im Forum raufladen...

Thema 3:

Erlaubt ist beides, sinnvoll... naja, die neuen zusätzlichen Möglichkeiten ohne Grund nicht zu verwenden ist nicht wirklich sinnvoll.

Thema 4:

Nein. Flexbox ersetzt einen großen Anwendungsfall von float (und ermöglicht weitere Sachen die nichts mit float zu tun haben). Die anderen Anwendungsfälle von float gibts noch.

Thema 5:
http://caniuse.com/
(allerdings ist die Googlesuche nach "caniuse something" oft hilfreicher als die Übersichtsseiten ... meiner Meinung nach)

Thema 6:
Statistiken in den Links von Thema 1.

Rest:
http://t3n.de/news/cross-browser-testing-501579/
https://www.browserstack.com/
http://mashable.com/2014/02/26/browser-testing-tools/
...

Hallo sheel,

vielen Dank für die Antwort. Zum Thema 1: Möchte immer gerne eine unabhängige Meinung haben und Frag lieber einmal mehr als weniger Danke für die Links. Zum Thema 2: Werde ich noch hochladen (vergessen), schreibe aber gerade vom Handy.

 

[hume1991]

Hallo sheel,

anbei Bild. Habe bereits ein wenig angefangen:

<!doctype html>
<html lang="de">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style.css" rel="stylesheet">
</head>

<body>


<!-- Kopfteil -->
<header>
<a href="index.html"> <img class="logo" src="img/bild.png" height="91" width="251" alt="Bild" title="Bild"> </a>
</header>

<!-- Navigation -->

<nav>

</nav>

<!-- Inhalt -->

<main>

<article class="box1"> <h1>Box1/h1> </article>

<article class="box2"> <h2>Box2</h2> </article>


</main>

<!-- Fußzeile -->

<footer>

</footer>

</body>

</html>

*
{
    margin:0;
    padding:0;

}

header
{
    height:150px;
    background-color:#D3d3d3;
    background-color:hsla(360,0%,83%,0.2);
    border-bottom: 1px groove black;
           
}

.logo
{
    padding:25px;
   
}

.box1
{
    position:absolute;
    top:10em;
    left:3em;
    height:450px;
    width:450px;
    background-color:green;
    text-align:center;
   
   
}

.box2
{
    position:absolute;
    top:10em;
    left:35em;
    height:450px;
    width:450px;
    background-color:green;
    text-align:center;
   
}

Bezüglich Logo habe ich es heruntergesetzt mit padding, ist diese Vorgehensweise richtig oder hätte man einen anderen Weg gehen sollen?
Habe derzeit 2 Boxen erstellt (Bild ist alte Website) und nur zur veranschaulichung. Ist die Vorgehensweise mit position:absolute; richtig? Element freistellen? War die Auswahl von article richtig da zwei verschiedene Inhalte (Themen). Das manche Code Teile noch leer sind ist bewusst, genau wie die Farben bei den Boxen ist nur zu Testzwecken gedacht. Sollte man dass Bild mit einem hover hinterlegen oder ist es unsinnig? (eigene Meinung). Außerdem werde ich bei dieser Website: http://screensiz.es/ nicht wirklich schlau.. Bei Chrome gibt er mir bei Entwicklertools iPhone 6 Plus 414x736px aus. Nehme ich die Seite http://screensiz.es/ stimmen die Angaben überhaupt nicht überein. Wie wurde dies berechnet? Welche Maße sollen nun wirklich berücksichtigt werden?