Show sourcecode

<h2>Kmom04: CSS och en style-väljare i PHP</h2>

<p><strong>Konto-informationen som behövs för att logga in på min sida:</strong></p>
<p>Användarnamn: nicolas</p>
<p>Lösenord: password</p>

<p><strong>* Reflektera över svårigheter/problem/lösningar/resultatet, etc.</strong></p>
<p><strong>* Lyckades du med din style-väljare?</strong></p>

<p>Den största utmaningen var att skriva stylesheet-väljaren.</p>

<p>Jag valde att först försöka implementera en stylesheet-väljare utan att kolla nåt på, eller ens läsa om, MOS kod, bortsett från mitt val att bruka samma readDirectory-funktion som används i MOS kod, åtminstone temporärt, för att få lite skjuts på vägen. Målet jag satte för mitt första försök att implementera en stylesheet-väljare var att implementationen skulle vara, i mina ögon och med min nuvarande kunskap, så simpel som möjligt och gå så snabbt som möjligt att implementera, och ha lättförståelig kod, samt att den inte skulle ta lång tid på sig för att genomföra bytet av stylesheet.</p>

<p>Jag ordnade en form vars list options genereras av php-kod som läser katalogen med .css-filerna och och som sedan, inuti en for-loop som går igenom den funna .css-filerna, echoar fram option-element för formens select-element. Jag såg genom onchange=form.submit till att ens val submittas utan behov av att trycka på en submit-knapp, varpå jag lagrade det i $_SESSION[”stylesheet”]. När en form submittas refreshas sidan formen befinner sig på så jag tänkte att det vore enkelt att ha en if-sats högst upp i header-filen, som kollar om $_SESSION[”stylesheet”] har satts och, isåfall, brukar dess värde, men, om den inte satts, brukar en default-css-fil. Eftersom jag ville att formen skulle hålla kolla på vilket val som gjorts sist så satte jag en liknande if-sats innan koden som bygger upp formen och modifierade denna kod så att option-elementet som motsvarar senast valda stylesheet får attributet selected.</p>

<p>Resultatet av implementationen beskriven ovan tycks vara visuellt och funktionellt ekvivalent med MOS resultat. Efter att skrivit den gick jag igenom MOS kod för att se vad för finess jag dock kanske hade missat. Jag noterade att MOS blandade PHP och HTML-kod på att vis som jag fann mer elegant än det vis jag hade gjort det på. MOS integrerande av PHP och HTML i header-filen, med en kolon-brukande if-sats, samt hans bruk av sträng-appendering för genererandet av HTML-markup tyckte jag var mer elegant än mina motsvarande lösningar. Jag låter dock min motsvarande kod stå kvar för inlämningen av detta kursmoment som ett ”bevis” för att jag tänkt själv och arbetat från ”scratch” (jag ändrar sen kanske något i min kod så att den mer liknar MOS inför inlämning av nästkommande kursmoment).</p>

<p>En sak jag ändå tog med från MOS implementation, efter att ha läst om den, var nyttjandet av en processing-sida med redirect. Innan jag brukade en sådan var jag tvungen att ha med en $_POST-koll i eller över head-elementet för att byta stylesheet för sidan (denna koll sker ju nu istället på processing-sidan). Först satte jag nya stylesheetet just där det valdes, men då hade jag behövt påtvinga en (extra) refresh på sidan efter submit av ens val för att valet skulle leda till stylesheet-byte direkt när valet gjorts, vilken uppenbarligen vore en dum lösning p.g.a. dubbel refresh av sidan.</p>

<p>Jag lade inte märke till några nämnvärda validerings-fel/varningar.</p>


<p><strong>* Beskriv hur väl du kan CSS (nybörjare, erfaren).</strong></p>

<p>Bortsett från det jag lärt mig i denna kurs så är jag nybörjare inom CSS.</p>


<p><strong>* Vad tycker du om CSS så här långt in i kursen?</strong></p>

<p>Jag gillar det "kaskaderande" bestämmandet av vilka CSS-regel som gäller för ett visst HTML-element och den ”heltäckande” mångdfald av selektorer för att specificera var man vill applicera den relaterade CSS-koden. Jag gillar även uppdelningen med att HTML sköter ”struktur” och att CSS sköter den visuella presentationen, p.g.a. "modulariteten", enkelheten med vilken man skulle kunna låta användare ändra sidans presentation, med alternativa  stylesheets man själv kodat och/eller som användaren har kodat/funnit, möjligheten att lätt erbjuda alternativa styles beroende på var sidan presenteras (telefon, osv.), samt det faktum att koden blir mer lättläst om de två språken inte blandas så mycket. Sist men inte minst så tycker jag inte det är så svårt.</p>


<p><strong>* Hur tänkte du när du gjorde din extra stylesheet och vad blev resultatet?</strong></p>

<p>Jag skapade ett par nya versioner av det stylesheet jag lämnade in i och med inlämningen av förra kursmoment (gotham-steel.css och gotham-rust.css), för vilka jag prövade att bruka förslag från färgschema-verktyget på www.paletton.com, ett verktyg jag föredrog att arbeta med istället för det verktyg som länkades till sidan för kursmomentet. Med den sajten tog jag fram ett par ”triad”-scheman med komplement-färg för basfärgen (vilken jag lät vara färgen för min sajts logga, vars färg skiljer sig mellan de två stylesheeten). Jag ordnade även en ”färgglad”, regnbågs-inspirerad design (rainbow.css).</p>

<p>För dessa tre stylesheets ordnade jag en sedan in en fixed ”banér” (stadssilhuett för gotham-css och kullar för rainbow.css), vilken följer med fönstret när man scrollar och lärde mig lite om CSS z-index när jag passade den in mellan sajtens bakgrund och content-divven (jag tror dock att min z-lösning är lite av ett ”hack”, då jag brukar HTML-elementet istället för body-elementet för att få till utseendet jag önskade – det kan hända att jag efter skrivande stund försöker mig på en annan kanske ”logiskt bättre” lösning). Jag lade även transitions för nav-meny-val och "pseudo-transitions" för aside-meny-val.</p>

<p>Påstår inte att mina stylesheet är särskilt bra, men för nybörjar-designs så är jag nöjd med de för tillfället.</p>


<p><strong>* Börjar du känna att du bemästrar CSS?</strong></p>

<p>Jag tycker att jag har god koll på reglerna för kaskaderandet, selektorerna, klasser, id, hur box-modellen har det så att innehavda element påverkas av elementen som innehar de, osv. Att säga att jag bemästrar det hela vore att ta i. Under mitt arbeta uppkom det något som jag blev riktigt fundersam över, vilket var hur z-index fungerar i relation till body och html-elementet, något jag ville reda ut för att fixa en slags ”footer” som hänger med sidan när man scrollar (denna finns implementerad på sidan). Det känns lite som jag fått till den på något slags oelegant vis och det kändes inte så intuitivt. Att bemästra CSS vore väl att bättre känna av dess begränsingar och hur man kan arbeta omkring de smidigare än vad jag kanske gjort.</p>


 
<p><strong>* Hur går det med ditt PHP:ande?</strong></p>

<p>Jag tycker det går bra, men framöver så skall jag försöka fundera ut mer minimalistiska lösningar vad det gäller ”interleaving” av PHP-kod med HTML-mark-up, exempelvis när PHP används för att dynamiskt generera HTML-mark-up. Annars börjar PHP kännas ”som hemma” nu, men det har ju också länge varit ”välkomnande” p.g.a. dess likhet med C++ och andra programmeringsspråk jag kan bra.</p>