Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

CSS-sjukan når oanade höjder

1 2
Permalänk
Hedersmedlem
●

CSS-sjukan når oanade höjder

Ta en titt på den här sidan - helst i en gammal browser.

http://www.designmeme.com/

Titta på sourcekoden. Navigera runt lite, och känn efter hur det känns. Hur är detta framsteg?

Lättare att hitta?

Knappast. Det tar flera sekunder att hitta de olika artiklarnas titlar, främst på grund av att raden med datum / antalet kommentarer lyser starkare och kräver mer uppmärksamhet

Snyggare kod?

Pyttsan. Det var det grötigaste skit jag sett, fem sidor javascript innan man ens kommer ner till markupen.

Fräschare look?

Tillåt mig småle. Det där är precis lika modernt som dropskuggor i Photoshop.

Ta detta som ett exempel, mina vänner. Nästa gång det rycker i CSS- eller javascript-tarmen, tänk då på att använda det till något vettigt.

Visa signatur

Teeworlds -- söta små rackare med stora jävla puffror

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag avskyr också överstylade CSS-sidor, fast hellre det än flash (urr).
En sak jag måste säga är att jag skiter i sourcen på hemsidor.
PHP-koden osv är roligt om den ser trevlig ut. Html-koden får vara trevlig nog så det går att arbeta med och tillräckligt bra så den fungerar i webbläsare men att orka titta på sourcen på hemsidor orkar jag inte med. Och jag förstår inte varför man skulle göra det heller när det bara gäller design. Html går ju inte få snyggt även om detta kanske var ett skräck-exempel.

Visa signatur

"Knowledge amplification. What he learns, we all learn. What he knows, we all benefit from."

Redigera
Citera flera Citera
Permalänk
Medlem
●

Varför så negativ? Det är ju sånna här fulhack som ger upphov till morgondagens markupspråk. Personligen hatar jag all sånt där grafisk skit med javascript, men fler alternativ måste väl höra till det bättre om något.

I fall man om ett år kan göra samma sak som den där sidan fast med vanlig XHTML och CSS istället för en massa JS vore väl det jättebra.

Edit: Vill bara tillägga att jag också tycker den där sidan suger rakt igenom. Pinsamt. Men jag har inget emot tekniken om den används _rätt_.

Visa signatur

TV-kalendern.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

Javascript i sig är inget fel, men att folk gör samma misstag med det som med CSS (d.v.s. lägger funktion i markupen) är kanske det som ger javascript dåligt rykte..

Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

För fasiken, sidan fungerar inte ens vettigt i IE6. Tankarna far till onoff när jag ser koden. Varför får han/hon en massa kunder? :/

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

Gammal browser? sidan ser ju bättre ut då.
http://uzi.ath.cx/files/DesignMeme.png
Mmh, underbart.. lättnavigerat, överskådligt.. precis som en hemsida ska se ut.

Visa signatur

Det kan aldrig bli fel med mekanisk destruktion

Redigera
Citera flera Citera
Permalänk
Musikälskare ★
●

hade aldrig kunnat göra nått sånt själv så den var väll bra

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB DDR5 Vengeance ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X ❀ Time Spy: 19 340

📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hmm, om man bortser helt från koden så kan jag inte hålla med om att sida är ful. Rättare sagt, jag tycker att den är snygg. Vad beträffar kodningen så var väl den ganska rörig...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Semantisk markup ftw?

Citat:

The forgotten basics of CSS
Let me quickly recap what cascading style sheets actually do... They allow you to redefine the presentation of any HTML tag. This means that there is no need to be bound by how a tag displays by default because you can change it. We can now use whatever markup makes sense and then redefine it to fit our design. That's the key benefit of CSS – it lets you use the right HTML.

läs mer här

it lets you use the right HTML är den delen som alla missar när dom åker CSS. Istället för att tänka på hur dom ska beskriva innehållet så tänker dom på hur dom ska visa innehållet.

Detta leder till det HTML-bajs som vi såg på designmeme.com, och ärligt talat finns det inga större skillnader mellan tabellbaserad design och det som dom har. Dom återuppfinner tabellbaserad design med hjälp av <div>-element och CSS. Way to go!

Här är en rätt bra artikel som går igenom det viktigaste vad gäller semantik på webben. Saker som folk ofta inte tänker på när dom kådar sina hemsidor.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sahar ska en sida se ut imho: http://syndrome.st/

En polare som gjort den. Web 2.0 to the max. Visst, ser vael inte super ut i IE6, men vilken sida goer det ffs? Har foer mig att den validerar iaf, sadesa.

Visa signatur

MacBook Pro 15" 2.4GHz Core 2 Duo, X25-M 160 GB

Redigera
Citera flera Citera
Permalänk
Medlem
●

Web 2.0 to the max? Pisskod skulle jag vilja säga.

Ska vi ta och analysera det här då.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

DOCTYPE, +1 poäng.
Charset specificerat, +1 poäng.

<div id="top"> </div>

wtf? Använda en speciell div utan innehåll bara för att få in en bakgrundsbild, -2 poäng.

<div id="logo"><img src="img/logo.jpg" alt="" /></div>

<div id="mouseovers">
<div id="home"><a href="index.html"><img src="img/home.jpg" alt="" border="0" /></a></div>
<div id="about"><a href="about.php"><img src="img/about.jpg" alt="" border="0" /></a></div>
<div id="showcase"><a href="showcase.html"><img src="img/showcase.jpg" border="0" alt="" /></a></div>
<div id="guestbook"><a href="guestbook.php"><img src="img/gb.jpg" alt="" border="0" /></a></div>
</div>

Wrappa logon i en egen div utan anledning, -1 poäng.
Använda divs för listan av länkar istället för en faktisk lista, -1 poäng.

<span class="header"><img src="img/icon_welcome.png" alt="" />  Welcome!</span><br />

Använda en span-tag istället för en header-tag, -2 poäng. (det borde vara -1, men klassdjäveln heter header, A BIG TIP OFF I WOULD SAY!)
Använda nbsp för att 'knuffa' iväg texten istället för CSS, -1 poäng.
Använda en br-tag istället för att använda CSS, -1 poäng.

<img src="img/hr.jpg" alt="" /><br />

Använda en bild för att skapa en HR, -1 poäng.

<span class="text">
Hello there, and welcome to my mere website. I call myself Syndrome. This site is a showcase of stuff I've made, mainly including webdesign and photgraphy. Use the navigation up there ^ to navigate on this site.
<br />
Just for the record, this website is coded in valid XHTML and CSS. I still recommend you to use <a href="http://www.getfirefox.com" target="_blank">Mozilla Firefox</a> for the best browsing experience.
<br /><br />
<div id="notice">
<b><span style="color: #A53D3D">Notice!</span></b><br />
To enjoy this site to 100%, please turn on JavaScript in your browser. This site is using harmless JavaScript to boost the eye candy a little. Also, it's recommended that you use a resolution of 1024x768 or higher.
</div>
</span>

Använda en span för att återskapa div-liknande beteende, -1 poäng.
Inte använda p-taggar/använda br-taggar för att skapa paragrafer, -2 poäng.
Använda en span-tag istället för en header, -1 poäng.

<b>» April 16th, 2006 | 6:44 PM</b><br />

Använda b-taggar istället för strong-taggar, -1 poäng.
Inte använda span-taggen, -1 poäng.

Så, slutställningen blir:
1 + 1 + -2 + -1 + -1 + -2 + -1 + -1 + -1 + -1 + -2 + -1 + -1 + -1 = -13 poäng.

U LOSE AT TEH INTARNET!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av KTottE
U LOSE AT TEH INTARNET! [/B]

Yes, it's so nice not to be a geek

Foer oevrigt var det som sagt inte jag som skrivit/gjort sidan. Koden skiter jag vael typ helt i, sjaelva layouten pa sidan aer genialisk imho. Det var det jag menade med Web 2.0 to the max

Visa signatur

MacBook Pro 15" 2.4GHz Core 2 Duo, X25-M 160 GB

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Toffelmannen
Yes, it's so nice not to be a geek

Foer oevrigt var det som sagt inte jag som skrivit/gjort sidan. Koden skiter jag vael typ helt i, sjaelva layouten pa sidan aer genialisk imho. Det var det jag menade med Web 2.0 to the max

Att sidan var snygg kan jag hålla med om, men inte koden. Och med Web 2.0 brukar man väl ändå mena siter med Ajax-lösningar? Om inte annat tycker jag nog det borde vara lite javascript med för att få kallas web 2.0

Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Guru Meditation
Att sidan var snygg kan jag hålla med om, men inte koden. Och med Web 2.0 brukar man väl ändå mena siter med Ajax-lösningar? Om inte annat tycker jag nog det borde vara lite javascript med för att få kallas web 2.0

Den har ju en del javascript juh! Det staar ju tom klart och tydligt. Kolla showcase t ex.

Visa signatur

MacBook Pro 15" 2.4GHz Core 2 Duo, X25-M 160 GB

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Toffelmannen
Den har ju en del javascript juh! Det staar ju tom klart och tydligt. Kolla showcase t ex.

Sorry! Klicka aldrig runt på siten, kollade bara förstasidan. My bad!

Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Toffelmannen
Sahar ska en sida se ut imho: http://syndrome.st/

En polare som gjort den. Web 2.0 to the max. Visst, ser vael inte super ut i IE6, men vilken sida goer det ffs? Har foer mig att den validerar iaf, sadesa.

Hmm.. han borde ta och titta till sin gästbok

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av SmuckeN!
Hmm.. han borde ta och titta till sin gästbok

Hehehe, kudos till den som gjorde det. Så klart gjorde han fel och borde straffas ;), men några plus i kanten får han allt ändå

Visa signatur

"Sleep is one of those funny things about being a human being" - Marshall Brain
"Mike broke the hubble, Mike broke the hubble" - Mystery Science Theater 3000
"Det finns inget som kan kallas skrot!" säger Mulle Meck, "bara gamla saker som går att använda på nya sätt. Rulla ut och rulla på."

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Power
Hehehe, kudos till den som gjorde det. Så klart gjorde han fel och borde straffas ;), men några plus i kanten får han allt ändå

*bort*

Visa signatur

MacBook Pro 15" 2.4GHz Core 2 Duo, X25-M 160 GB

Redigera
Citera flera Citera
Permalänk
Medlem
●

Skulle bara droppa förbi, det är min hemsida (syndrome).
Tyckte det var ganska onödigt gjort det ni gjorde med gästboken. Okej att koden inte följer bibeln, men vafasen. Så jävla onödigt, omoget och löjligt.

Tänker plocka ner gästboken hursomhelst. Har ni mer skit att kasta på min hemsida som får -13 i betyg så go for it

Visa signatur

UNIX/Programmering.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det är väl inte säkert att det är en SweCare som har pajat din gästbok, eller hur?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Annars är ju små, fjuniga SweCare kända för att sabba andra användares verk.

Visa signatur

->Can you still feel the butterflies?<-
Jimmy Eat World | Fall Out Boy

Redigera
Citera flera Citera
Permalänk
Medlem
●

Precis. Klart det är en swecare som pajjat din gästbok. Jag tycker din sida var fin Voidhanger och den får ett stort + av mig! Skit i de jävla negativa idiotnördarna som bara klankar ner på folk och känner sig bra för det.

ja..

Visa signatur

-Jag har visst vart ute idag.
-Vart då?
-Ne, jag öppnade fönstret förut... www.iampear.com Hakona Matata!

Redigera
Citera flera Citera
Permalänk
Medlem
●

AggeMannen: Jag har inte sett någon som har klankat ner på någons sida. Bara kommentarer på hur html koden ser ut, hur pass bra/dåligt den följer standaren.

Men designen är väldigt tilltalande!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Voidhanger
Skulle bara droppa förbi, det är min hemsida (syndrome).
Tyckte det var ganska onödigt gjort det ni gjorde med gästboken. Okej att koden inte följer bibeln, men vafasen. Så jävla onödigt, omoget och löjligt.

Tänker plocka ner gästboken hursomhelst. Har ni mer skit att kasta på min hemsida som får -13 i betyg så go for it

Eftersom folk blev så gnälliga i tråden så slängde jag ihop ett exempel på hur man bör göra:
http://kungtotte.homelinux.org/semantic_syndrome/

Jag gillar utseendet på hemsidan, det var bara det att koden lämnade mycket i övrigt att önska. Speciellt när det inte är särskilt svårt att ordna det på ett semantiskt korrekt sätt.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Citat:

Ursprungligen inskrivet av KTottE
Web 2.0 to the max? Pisskod skulle jag vilja säga.

Ska vi ta och analysera det här då.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

DOCTYPE, +1 poäng.
Charset specificerat, +1 poäng.

<div id="top"> </div>

wtf? Använda en speciell div utan innehåll bara för att få in en bakgrundsbild, -2 poäng.

<div id="logo"><img src="img/logo.jpg" alt="" /></div>

<div id="mouseovers">
<div id="home"><a href="index.html"><img src="img/home.jpg" alt="" border="0" /></a></div>
<div id="about"><a href="about.php"><img src="img/about.jpg" alt="" border="0" /></a></div>
<div id="showcase"><a href="showcase.html"><img src="img/showcase.jpg" border="0" alt="" /></a></div>
<div id="guestbook"><a href="guestbook.php"><img src="img/gb.jpg" alt="" border="0" /></a></div>
</div>

Wrappa logon i en egen div utan anledning, -1 poäng.
Använda divs för listan av länkar istället för en faktisk lista, -1 poäng.

<span class="header"><img src="img/icon_welcome.png" alt="" />  Welcome!</span><br />

Använda en span-tag istället för en header-tag, -2 poäng. (det borde vara -1, men klassdjäveln heter header, A BIG TIP OFF I WOULD SAY!)
Använda nbsp för att 'knuffa' iväg texten istället för CSS, -1 poäng.
Använda en br-tag istället för att använda CSS, -1 poäng.

<img src="img/hr.jpg" alt="" /><br />

Använda en bild för att skapa en HR, -1 poäng.

<span class="text">
Hello there, and welcome to my mere website. I call myself Syndrome. This site is a showcase of stuff I've made, mainly including webdesign and photgraphy. Use the navigation up there ^ to navigate on this site.
<br />
Just for the record, this website is coded in valid XHTML and CSS. I still recommend you to use <a href="http://www.getfirefox.com" target="_blank">Mozilla Firefox</a> for the best browsing experience.
<br /><br />
<div id="notice">
<b><span style="color: #A53D3D">Notice!</span></b><br />
To enjoy this site to 100%, please turn on JavaScript in your browser. This site is using harmless JavaScript to boost the eye candy a little. Also, it's recommended that you use a resolution of 1024x768 or higher.
</div>
</span>

Använda en span för att återskapa div-liknande beteende, -1 poäng.
Inte använda p-taggar/använda br-taggar för att skapa paragrafer, -2 poäng.
Använda en span-tag istället för en header, -1 poäng.

<b>» April 16th, 2006 | 6:44 PM</b><br />

Använda b-taggar istället för strong-taggar, -1 poäng.
Inte använda span-taggen, -1 poäng.

Så, slutställningen blir:
1 + 1 + -2 + -1 + -1 + -2 + -1 + -1 + -1 + -1 + -2 + -1 + -1 + -1 = -13 poäng.

U LOSE AT TEH INTARNET!

Vad är det för fel med att använda <b> istället för <strong>? Dom gör samma sak, förutom att <b> är kortare och enklare att skriva.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Override
Vad är det för fel med att använda <b> istället för <strong>? Dom gör samma sak, förutom att <b> är kortare och enklare att skriva.

Till synes gör de samma sak, men så är egentligen inte fallet.

<b> är bara till för att göra text fetare.

<strong> har en semantisk betydelse och talar om att den markerade texten skall betonas mer än den övriga texten. Det är bl.a. bra för synskadade som "lyssnar" sig fram på webben. Dessutom är det inte säkert att <strong> visas som fet text i alla webbläsare. Det är bara en vedertagen standard att den gör texten fet antar jag.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Citat:

Ursprungligen inskrivet av ChristofferC
Till synes gör de samma sak, men så är egentligen inte fallet.

<b> är bara till för att göra text fetare.

<strong> har en semantisk betydelse och talar om att den markerade texten skall betonas mer än den övriga texten. Det är bl.a. bra för synskadade som "lyssnar" sig fram på webben. Dessutom är det inte säkert att <strong> visas som fet text i alla webbläsare. Det är bara en vedertagen standard att den gör texten fet antar jag.

Läste det.

Så det är ju inte fel att göra text fetare med <b> om den inte ska utalas med en starkare betoning.

<strong> används alltså bara i brödtexter då?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av KTottE
Eftersom folk blev så gnälliga i tråden så slängde jag ihop ett exempel på hur man bör göra:
http://kungtotte.homelinux.org/semantic_syndrome/

Jag gillar utseendet på hemsidan, det var bara det att koden lämnade mycket i övrigt att önska. Speciellt när det inte är särskilt svårt att ordna det på ett semantiskt korrekt sätt.

hm.. Mr.VetAllt, så man ska inte stänga meta-taggar på ett korrekt sätt?
Skärp dej för fan.

Visa signatur

-Jag har visst vart ute idag.
-Vart då?
-Ne, jag öppnade fönstret förut... www.iampear.com Hakona Matata!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av AggeMannen
hm.. Mr.VetAllt, så man ska inte stänga meta-taggar på ett korrekt sätt?
Skärp dej för fan.

Herregud, jag copy-paste:ade hans kod och glömde stänga meta-taggarna. Skjut mig. Om du läser i texten så står det "photgraphy" också istället för "photography", tänk vilken hemsk människa jag är som lämnade kvar det stavfelet!!
Ät bajs och dö.

Override: Tanken är att HTML ska beskriva innehållet, inte utseendet. När du sätter "<em>foo</em>" eller "<strong>bar</strong>" så säger du egentligen inte "visa foo med kursivt teckensnitt och bar med fetstil" utan du säger "betona foo och gör en stark betoning på bar", sen är det upp till dig som designer (eller webbläsarens inställningar) att bestämma hur 'betoning' och 'stark betoning' ska se ut.

Det är inte olagligt att använda <b>-taggar istället för <strong>-taggar, men det är inte så man bör göra.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av KTottE
Herregud, jag copy-paste:ade hans kod och glömde stänga meta-taggarna. Skjut mig. Om du läser i texten så står det "photgraphy" också istället för "photography", tänk vilken hemsk människa jag är som lämnade kvar det stavfelet!!
Ät bajs och dö.

Override: Tanken är att HTML ska beskriva innehållet, inte utseendet. När du sätter "<em>foo</em>" eller "<strong>bar</strong>" så säger du egentligen inte "visa foo med kursivt teckensnitt och bar med fetstil" utan du säger "betona foo och gör en stark betoning på bar", sen är det upp till dig som designer (eller webbläsarens inställningar) att bestämma hur 'betoning' och 'stark betoning' ska se ut.

Det är inte olagligt att använda <b>-taggar istället för <strong>-taggar, men det är inte så man bör göra.

Med tanke på din förnedringsuppsats med poängsystem så var dina egna semantiska misstag tämligen ironiframkallande, -3 poäng.

Visa signatur

-Jag har visst vart ute idag.
-Vart då?
-Ne, jag öppnade fönstret förut... www.iampear.com Hakona Matata!

Redigera
Citera flera Citera
1 2
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara