Zum Inhalt wechseln

Als Gast hast du nur eingeschränkten Zugriff!


Anmelden 

Benutzerkonto erstellen

Du bist nicht angemeldet und hast somit nur einen sehr eingeschränkten Zugriff auf die Features unserer Community.
Um vollen Zugriff zu erlangen musst du dir einen Account erstellen. Der Vorgang sollte nicht länger als 1 Minute dauern.

  • Antworte auf Themen oder erstelle deine eigenen.
  • Schalte dir alle Downloads mit Highspeed & ohne Wartezeit frei.
  • Erhalte Zugriff auf alle Bereiche und entdecke interessante Inhalte.
  • Tausche dich mich anderen Usern in der Shoutbox oder via PN aus.
 

   

Foto

CSS in HaTeeMäL einbinden

- - - - -
Erstellt von Emalik Xantier ,

  • Bitte melde dich an um zu Antworten
16 Antworten in diesem Thema

#1
Emalik Xantier
Geschrieben 05 May 2015 - 13:50 Uhr

Emalik Xantier

    Pentester

  • Premium Member
    • Likes
    46
  • 113 Beiträge
  • 19 Bedankt
  • Android, Android [root]
  • Windows, Linux

Hallo zusammen,

Es gibt 3 mir bekannte, meist genutzte Wege CSS einzubinden/zu nutzen.

1. Inline CSS (sche*sse)
 

<html>
    <body>
        <h1 style="color:#532073">Inline CSS</h1>
    </body>
</html>

2. Inline CSS im Head
 

<html>
    <head>
        <style>
            #title{
            color:#532073
            }
        </style>
    </head>
    <body>
        <h1 id='title'>Inline CSS im Head</h1>
    </body>
</html>

3. Auslagern
 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <h1 id='title'>CSS auslagern</h1>
    </body>
</html>

4. Nun kann ich aber auch:
 

<html>
    <head>
        <style>
            <?php require('css/style.css');?>
        </style>
    <head>
    <body>
        <h1 id='title'>Mit require</h1>
    </body>
<html>

Ich benutze immer Nr. 3, gibt es aber irgendeinen Grund Nr. 4 nicht zu benutzen? Ist ja an und für sich dasselbe Prinzip...
Wenn man das anschaut was zurückkommt ist es dasselbe wie Nr. 2... Der einzige Unterschied ist eigentlich dass dann im Quellcode behauptet wird, das CSS sei nicht ausgelagert.

Wer Syntaxfehler findet darf Sie behalten ;)


Bearbeitet von Emalik Xantier, 05 May 2015 - 14:11 Uhr.

42556667.png


Humor ist eines der besten Kleidungsstücke die man tragen kann ʕ•ᴥ•ʔ

#2
Meikyo
Geschrieben 05 May 2015 - 14:17 Uhr

Meikyo

    Lamer

  • Members
  • PIPPIPPIP
    • Likes
    0
  • 21 Beiträge
  • 0 Bedankt

Spricht nicht viel gegen. Ist nur genau so sinnig, wie dein komplettes html-Dokument in einer php-Datei mit echo auszugeben. Wenn du eine wirklich große Seite betreiben würdest, wäre es eben ein unnötiger php-Aufruf, der dich irgendwo auch Performance kostet.

 

Zudem werden externe css-Dateien gecacht und das fällt bei der pseudo-inline-Geschichte auch weg.


#3
FalkE
Geschrieben 05 May 2015 - 14:43 Uhr

FalkE

    1337

  • Banned
  • PIPPIPPIPPIPPIPPIPPIPPIPPIP
    • Likes
    4
  • 349 Beiträge
  • 79 Bedankt
  • Android [root]
  • Linux

nr 4 ist schwachsinn.

 

bei großen projekten mit mehreren dokumenten empfiehlt sich eine externe verlinkung via <link rel.. />, gibt auch absolut kein grund das nicht so zu machen (man muss einfach nur auf eine korrekte pfadangabe achten). du mischst hier einfach php mit rein und machst im endeffekt nichts anderes als nr 2.

 

laden kannste das aber auch über ne style.txt, die endung ist dabei egal. ist nur absolut umständlich und solche "methoden" finden auch keine anwendung.

ich denke mal du möchtest verschiedenes styling pro page nutzen und dir fehlt das wissen dies anständig umzusetzen, oder weshalb greifst du zu diesen dirty holzhammer methoden?


#4
Imperial
Geschrieben 05 May 2015 - 15:57 Uhr

Imperial

    Favoured Management

  • Premium Member
    • Likes
    544
  • 421 Beiträge
  • 606 Bedankt
  • 340868
  • verifiziert
  • iPhone
  • Windows, Mac OS

Bei Nummer 4 benötigst du PHP.

Daher wäre die Lösung, die alles abdeckt, Version 3.


There Is No Business Like Coding Business

 

#5
B1nary
Geschrieben 05 May 2015 - 16:56 Uhr

B1nary

    Samurai

  • Elite Member
    • Likes
    489
  • 506 Beiträge
  • 346 Bedankt

Warum ist Inline-CSS (Methode 1) deiner Meinung nach "sche*sse" ?


#6
Emalik Xantier
Geschrieben 05 May 2015 - 20:13 Uhr

Emalik Xantier

    Pentester

  • Premium Member
    • Likes
    46
  • 113 Beiträge
  • 19 Bedankt
  • Android, Android [root]
  • Windows, Linux

@Imperial Ja das stimmt, aber sonst gibt es keine Unterschiede welche vielleicht wichtig sind? Php wird ja meist sowieso benötigt.

@B1nary
Da bei mehreren Seiten das ganze mehrfach geschrieben werden muss. Ansonsten kannst du alle bzw. viele Files auf ein css beziehen, was grafische Änderungen extrem vereinfacht.

Wenn man wirklich solch ein kleines Projekt hat dass man alles in einer File möchte, sollte man Methode 2 nutzen da es wenigstens ein wenig übersichtlich ist.


Bearbeitet von Emalik Xantier, 05 May 2015 - 22:29 Uhr.

42556667.png


Humor ist eines der besten Kleidungsstücke die man tragen kann ʕ•ᴥ•ʔ

#7
B1nary
Geschrieben 06 May 2015 - 07:11 Uhr

B1nary

    Samurai

  • Elite Member
    • Likes
    489
  • 506 Beiträge
  • 346 Bedankt

@B1nary
Da bei mehreren Seiten das ganze mehrfach geschrieben werden muss. Ansonsten kannst du alle bzw. viele Files auf ein css beziehen, was grafische Änderungen extrem vereinfacht.

 

Wenn man ein Element mehrfach formatieren muss, nutzt man das class-Attribut und deklariert diese im Stylesheet. So bleibt es bei einem sauberen DOM-Aufbau ohne Überfrachtung, wie du ja geschrieben hast. Ansonsten ist gegen Inline-CSS gar nichts einzuwenden. Ich sehe also immer noch kein sinnvolles Argument, warum Inline-CSS "sch*sse" ist.

 

Ein sauberes, xHTML valides Dokument besitzt ein link-Attribut im Header. Dort werden alle benötigten CSS-Dateien eingebunden. CSS-Dateien können wiederum selbst in anderen CSS-Dateien referenziert werden.

@ import url('stylesheet.css');

Bearbeitet von B1nary, 06 May 2015 - 07:16 Uhr.

  • FalkE gefällt das

#8
Emalik Xantier
Geschrieben 06 May 2015 - 08:31 Uhr

Emalik Xantier

    Pentester

  • Premium Member
    • Likes
    46
  • 113 Beiträge
  • 19 Bedankt
  • Android, Android [root]
  • Windows, Linux

Doch natürlich ist es schlecht. Wenn man einen Teil schon auslagert kann man ja auch grad alles draussen haben.

Beim Debuggen hast sonst einfach immer doppelt so lange da im HTML und CSS nachschauen musst.

Je nachdem hast du mehrere Klassen auf einem und daneben machst noch ein paar inline Argumente, willst du wirklich überall nachschauen an was es liegt?

 

Ganz nebenbei ist auch der Code viel sauberer wenn man den Aufbau und den Style trennt, doch das ist wohl Ansichtssache.


42556667.png


Humor ist eines der besten Kleidungsstücke die man tragen kann ʕ•ᴥ•ʔ

#9
B1nary
Geschrieben 06 May 2015 - 09:21 Uhr

B1nary

    Samurai

  • Elite Member
    • Likes
    489
  • 506 Beiträge
  • 346 Bedankt

Ich hab nicht gesagt, dass man beides mischen soll / kann. Es ist nur nicht richtig zu sagen, dass Inline-CSS von Grund auf schlecht ist. Gerade wenn man mit jQuery arbeitet, ist Inline-CSS häufiger praktischer und performanter, als externe Deklarierungen.

 

Je nach DOM und Arbeitsverzeichnis (Ablage Index / CSS / Javascript) gibt es sogar Probleme, wenn es um

display: none;

geht, welches nicht als Inline-CSS vermerkt ist.


#10
Emalik Xantier
Geschrieben 06 May 2015 - 11:59 Uhr

Emalik Xantier

    Pentester

  • Premium Member
    • Likes
    46
  • 113 Beiträge
  • 19 Bedankt
  • Android, Android [root]
  • Windows, Linux

Stimmt. Solche Aussagen sollte ich mir eigentlich verkneifen. Es ist sowieso eine Ansichtssache.

 

Was meinst du mit ... ?


Je nach DOM und Arbeitsverzeichnis (Ablage Index / CSS / Javascript) gibt es sogar Probleme, wenn es um

display: none;

geht, welches nicht als Inline-CSS vermerkt ist.


42556667.png


Humor ist eines der besten Kleidungsstücke die man tragen kann ʕ•ᴥ•ʔ

#11
FalkE
Geschrieben 06 May 2015 - 12:07 Uhr

FalkE

    1337

  • Banned
  • PIPPIPPIPPIPPIPPIPPIPPIPPIP
    • Likes
    4
  • 349 Beiträge
  • 79 Bedankt
  • Android [root]
  • Linux

das gleiche gilt übrigens bei der anwendung von:

clear:both;

Stimmt. Solche Aussagen sollte ich mir eigentlich verkneifen. Es ist sowieso eine Ansichtssache.

 

Was meinst du mit ... ?

 

den größten fehler den man machen kannst ist zu behaupten das sei "Ansichtssache". programmiersprachen sind definiert und auf eine korrekte anwendung ausgelegt. eine interpretation was richtig, was falsch kann man sich dementsprechend sparen (es gibt natürlich individuellen syntax, die rede ist hier aber von einer grundanwendung).

 

desweiteren würde mich mal interessieren was du mit diesem thread bezweckst?

auf der einen seite gibst du tipps zum "programmieren lernen", auf der anderen seite verstehst du die materie selbst nicht und nutzt überschriften wie "HaTeeMäL" und deklarierst das einbinden von CSS mit PHP als methode.

 

ist mir alles ein wenig schleierhaft..


#12
Emalik Xantier
Geschrieben 06 May 2015 - 16:59 Uhr

Emalik Xantier

    Pentester

  • Premium Member
    • Likes
    46
  • 113 Beiträge
  • 19 Bedankt
  • Android, Android [root]
  • Windows, Linux

...desweiteren würde mich mal interessieren was du mit diesem thread bezweckst?

auf der einen seite gibst du tipps zum "programmieren lernen", auf der anderen seite verstehst du die materie selbst nicht und nutzt überschriften wie "HaTeeMäL" und deklarierst das einbinden von CSS mit PHP als methode.

 

ist mir alles ein wenig schleierhaft..

 

Ich möchte wissen, wie du auf den Schluss kommst dass ich die "Materie" nicht verstanden habe.

Dass du den Sinn dieses Threads nicht verstehst tut mir aufrichtig Leid, vielleicht kann ich dir jedoch helfen.

 

 

Ich benutze immer Nr. 3, gibt es aber irgendeinen Grund Nr. 4 nicht zu benutzen? Ist ja an und für sich dasselbe Prinzip...
Wenn man das anschaut was zurückkommt ist es dasselbe wie Nr. 2... Der einzige Unterschied ist eigentlich dass dann im Quellcode behauptet wird, das CSS sei nicht ausgelagert.

Ich wollte nie sagen dass die Variante 4 eine gute, gebräuchliche oder empfohlene Methode ist, ich wollte lediglich einen Grund haben, warum man es nicht tun sollte. Ob es egal ist, oder es etwas wichtiges gibt was dann passieren könnte. Wie z.B. js im head, oder am Ende einbinden.

 

Die Tatsache dass vieles im Programmieren Ansichtssache ist, finde ich richtig. Klar gibt es meist eine klare Syntax, bei HTML sowieso. Aber ob ich z.B. eine for Schleife + if, einer foreach schleife bevorzuge ist meiner Meinung nach völlige Ansichtssache. Oder ob du all dein CSS/js rauspackst, relative oder absolute Pfade verwendest, switch case dem if else bevorzugst etc. Ist absolute Ansichtssache (meiner Meinung nach xD).

 

 

EDIT: Ich habe deinen Beitrag von gestern um 15:43 komischerweise nicht gesehen, sonst hätte ich da schon geantwortet.


Bearbeitet von Emalik Xantier, 06 May 2015 - 17:01 Uhr.

42556667.png


Humor ist eines der besten Kleidungsstücke die man tragen kann ʕ•ᴥ•ʔ

#13
FalkE
Geschrieben 06 May 2015 - 17:53 Uhr

FalkE

    1337

  • Banned
  • PIPPIPPIPPIPPIPPIPPIPPIPPIP
    • Likes
    4
  • 349 Beiträge
  • 79 Bedankt
  • Android [root]
  • Linux

Die Tatsache dass vieles im Programmieren Ansichtssache ist, finde ich richtig. Klar gibt es meist eine klare Syntax, bei HTML sowieso. Aber ob ich z.B. eine for Schleife + if, einer foreach schleife bevorzuge ist meiner Meinung nach völlige Ansichtssache. Oder ob du all dein CSS/js rauspackst, relative oder absolute Pfade verwendest, switch case dem if else bevorzugst etc. Ist absolute Ansichtssache (meiner Meinung nach xD).

eventuell hilft es dir weiter nochmal die entsprechende dokumentationen seitens PHP durchzulesen, denn diese aussage bestätigt (leider) meine obige behauptung.

eine anwendung von z.b. if bedigungen oder einem switch findet immer gezielt an das vorhaben/die situation angepasst statt. ich kenne keinen programmierer wärend der entwicklung die würfel rollen lässt was funktionen angeht. bei der formatierung vom source kann ja jeder gerne individuell sein (was das system angeht sowieso). aber in der anwendung, egal ob prozedural oder objekt-orientiert gibt es nur falsch und richtig.


#14
B1nary
Geschrieben 06 May 2015 - 18:48 Uhr

B1nary

    Samurai

  • Elite Member
    • Likes
    489
  • 506 Beiträge
  • 346 Bedankt

Die Tatsache dass vieles im Programmieren Ansichtssache ist, finde ich richtig. Klar gibt es meist eine klare Syntax, bei HTML sowieso. Aber ob ich z.B. eine for Schleife + if, einer foreach schleife bevorzuge ist meiner Meinung nach völlige Ansichtssache.

Diese Behauptung finde ich noch abenteuerlicher. Programmieren ist - wie @ FalkE schon gesagt hat - fest strukturiert. Klar kann man variieren und foreach-Schleifen umschreiben. Das Script funktioniert trotzdem.

Das ist aber keine Ansichtssache sondern schlichtweg schlechte Programmierung. Unter Ansichtssache fallen Dinge wie Programmierstil (Einrückungen, Kommentierungen, Benennung von Variablen, etc.) oder die Strukturierung des Verzeichnisses (alles in einen Ordner, gegliedert in Ordner, Benennung der Ordner, etc.). Und selbst hier gibt es einfach schlechten Programmierstil und guten Programmierstil.

 

Ist zwar Offtopic, aber um das Thema mal aufzugreifen:

 

foreach() ist geeignet, um (assoziative) Arrays iterativ zu durchlaufen. Eine for-Schleife würde hier länger brauchen, da mind. zwei Parameter gestestet werden müssen

 

for() prüft

  1. ist die maximale Anzahl an Durchläufen erreicht ($i = 0; $i <= count($val); $i++)
  2. ist das Ende der Liste / des Arrays erreicht

zusätzlich würde dann noch die if-Anweisung kommen.

 

foreach() prüft

  1. ist das Ende der Liste / des Arrays erreicht (ja = break/continue/end; nein = iterate)

foreach() ist daher in Sachen Performance schneller als for() + if-Anweisung und dementsprechend vorzuziehen!


#15
Emalik Xantier
Geschrieben 06 May 2015 - 21:40 Uhr

Emalik Xantier

    Pentester

  • Premium Member
    • Likes
    46
  • 113 Beiträge
  • 19 Bedankt
  • Android, Android [root]
  • Windows, Linux

Hmm ein wenig überzeugt hat mich das schon. Man könnte sich nun aber auch fragen, was ist besser. In dem "for"-Fall ist es klar, aber in dem Beispiel, JS im Head oder am Ende einbinden hat beides Vor und Nachteile.

 

Trotzdem Danke für die Diskussion. Dieses Thema ist wohl ein wenig ansichtssache ;)


42556667.png


Humor ist eines der besten Kleidungsstücke die man tragen kann ʕ•ᴥ•ʔ

#16
FalkE
Geschrieben 07 May 2015 - 10:47 Uhr

FalkE

    1337

  • Banned
  • PIPPIPPIPPIPPIPPIPPIPPIPPIP
    • Likes
    4
  • 349 Beiträge
  • 79 Bedankt
  • Android [root]
  • Linux

dann erkläre doch bitte mal die nachteile beim einbinden von javascript am ende einer datei und den dazugehörigen unterschied beim einbinden in head/body. richtig es gibt keinen nachteil und eine parallele zu einbindung im head/body zu ziehen ist nur sinnvoll wenn es ums platzsparen etc geht. das einbinden von js am ende einer datei sorgt einfach nur für bessere performance, weil das laden eines scripts das nachfolgende html unterbrechen könnte.

 

aber da du ja immer noch der meinung bist, das thema sei ansichtssache und deinerseits eine sachliche betrachtung fehlt, ist hier wohl jeder hopfen und malz verloren.

 

was switch / if angeht kann ich dir nur diese seite empfehlen:

Please Login HERE or Register HERE to see this link!

Ternäre Operatoren (?:) 	17.143011 ms 	100%
If, ElseIf, Else 	57.918072 ms 	338%
If, ElseIf, Else (Verschachtelt) 	58.255911 ms 	340%
Switch 	67.255974 ms 	392%

aber hier möchte wohl jemand auf sein recht bestehen ;-)


Bearbeitet von FalkE, 07 May 2015 - 10:49 Uhr.

#17
B1nary
Geschrieben 07 May 2015 - 22:31 Uhr

B1nary

    Samurai

  • Elite Member
    • Likes
    489
  • 506 Beiträge
  • 346 Bedankt

in dem Beispiel, JS im Head oder am Ende einbinden hat beides Vor und Nachteile.

 

Auch hier gibt es einen Sinn, warum man JS am Ende einer Datei einbinden sollte. Zum einen - wie @ FalkE schon sagte - aufgrund der Performance (DOM wird geladen und der User muss nicht auf JS warten) und zum anderen, um die Referenzwirkung von JS auf HTML-Elemeten nicht zu zerstören.

 

Wenn zuerst JS eingebunden wird und danach der HTML-Aufbau erzeugt wird, kann JS u.U, keine Änderungen mehr am DOM vornehmen (Elemente faden, sliden, CSS-Manipulation, ...). Daher ist es sinnvoll, JS nach vollständigen Aufbau des Gerüstes einzufügen.

 

jQuery beispielsweise prüft dies so

$(document).ready(function() { ... }

Zurück zu   Web Coding

  Thema Forum Themenstarter Statistik Letzter Beitrag

Dieses Thema wurde von 68 Mitglied(ern) gelesen


    , ¥akuza112, Avni, B1nary, Benutzer, BlackZetsu, Born2Hack, Bot4ng, Bypass, Ch!ller, ChiLLiN, Cranky, Cube, Cyber Tjak, dos, DR.zydz, Eddy, ellogro, Emalik Xantier, FalkE, Flex.Net, fluffybunny, Framerater, FullMetall, funstyler, ghost12, gutzuu, hitman56, holz96, Husti_nett, Imperial, Injection, Iron, jabba, JeyP, Juri, kHAZYY, kiwitone, lNobodyl, loginman1, lolorollo, Mantrayana, MariRut, Meikyo, Mister1337, most_uniQue, n1nja, Neonxen, nikita, NoNameMT, notfound, opheus, paulaner, pdr0, private, raider, Rasputin, SAR, Seldos, ShanLer, smc2014, Stanley, Throfix, ueEqlL, vôl, xmmlegends, xrahitel, Zydelia
Die besten Hacking Tools zum downloaden : Released, Leaked, Cracked. Größte deutschsprachige Hacker Sammlung.
  1. Toolbase.bz
  2. →   Coding
  3. →   Web Coding