volgorde css

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Software Developer- C++

Software Developer- C++ EXCITING NEW OPPORTUNITY FOR A LEADING CLIENT DESIGNING AND DEPLOYING SOFTWARE! Must be fluent in Dutch and English Zeist based client Software Developer- C++, GIS Competitive Salary To apply please call 020 800 4990 or email widdowson@searchability.com We are a highly respected and professional software house who create bespoke software solutions for a niche sector. Due to a period of growth we’re looking for a talented C++ Developer to join the team in Zeist. Sourced by: @SearchabilityEU– your 24/7 twitter feed of latest IT vacancies across Europe WHO ARE WE? With a passion for software for over

Bekijk vacature »

P - ETL Developer

Looking for a freelance ETL Developer i am looking for a freelance ETL Developer for a project in financial services. * Start: 4 January * Duration: 12 months * Hours per week: 40 * Location: Amsterdam (mostly working from home) Your impact as ETL Developer As senior ETL developer you will be able to discuss and develop the best technical solution with the team, but also are capable to discuss what should and should not be done from forward looking (business) perspective. What doe you bring as ETL Developer * 8 year's working experience as ETL Developer / Specialist *

Bekijk vacature »

Senior C#.Net Developer - Logistieke (zeevaart) se

Voor een hechte, informele en jonge club gespecialiseerd in Transport Management Systemen voor de vracht en havensector zijn wij op zoek naar een Senior .Net C# Developer. Een goede, sociale communicator die samenwerking en passie voor het vak key vindt. En die durft te sparren, dromen en pionieren! Deze organisatie van 150 man (waarvan 9 IT-toppers) zorgen er al 30 jaar voor dat internationale transport tot in de details kunnen worden berekend, ingepland en gemanaged, bijvoorbeeld in de Rotterdamse haven. Hierdoor worden kosten, materialen, arbeid, ontwerpen en oplevering perfect en just-in-time op elkaar afgestemd. Ze zijn marktleider én pionier in

Bekijk vacature »

Java Developer / Webservices / Overheid

Bedrijfsomschrijving De organisatie waar je komt te werken is een semi-overheidsinstelling die zorgt voor een goede samenwerking tussen verschillende overheidsinstanties. Het is een familiaire club die gaat voor kwaliteit en langdurige relaties. Het bedrijf is gevestigd in hartje Utrecht met het Centraal Station op loopafstand en een parkeergarage naast het pand. Bij deze stabiele organisatie gaat men uit van kwaliteit hoogwaardige softwarediensten. Je zal hier als Java Ontwikkelaar geen projecten tegenkomen waar je uit commercieel oogpunt jouw werk zo snel mogelijk af moet leveren. Uiteraard zal je hier wel het beste uit jezelf moeten halen, maar hierbij ligt het zwaartepunt

Bekijk vacature »

Solution Developer Power BI Python

Data Engineer Power BI Python SQL DAX (Azure) Full-time Location: Rotterdam Contract Duration: 6months (temp or freelance) Background The Integrated Operations Benelux team consist of various roles that make Excellent Execution a success. One of these roles is a (contract) role of a Business Solutions Developer. Less time spent on Running the Business to reinvest in Growing the Business whilst Improving Customer and Employee Satisfaction is the vision of Integrated operations. Integrated Operations brings Customer Development, Supply Chain and Sales within Benelux together in realizing excellent execution. The 4 principles driving Integrated Operations are: end 2 end ownership, maximized automation,

Bekijk vacature »

.NET Developer PACS / Multimedia

.NET Developer PACS / Multimedia Wil jij met jouw ontwikkelskills medisch specialisten het optimale uit beeldmateriaal laten halen? Dan is dit jouw droombaan! Ter versterking van ons PACS-team in Amsterdam zoeken wij een ontwikkelaar die verantwoordelijkheid krijgt over zijn ‘eigen’ software. Jouw baan In deze functie ga je medische apparatuur (ECG\echo\OCT\MRI\Etc) integreren in ons EPD. Jij houdt je daarnaast bezig met het maken van software om de verschillende output-formaten van de apparatuur te ondersteunen en te presenteren aan medische specialisten. Tevens ben je verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van je eigen PACS-tools (Picture Archiving and Communication System).

Bekijk vacature »

.NET Core Developer

Voor een gaaf project van een klant van ons ben ik op zoek naar een .NET Core developer! Het betreft een organisatie die één van de grootste is binnen de branche. Je gaat samen met je team werken aan een grote webapplicatie van deze klant met maandelijks miljoenen gebruikers. Technieken: - .NET Core - Kubernetes, Docker - Microservices - Azure - Agile/scrum omgeving Algemene informatie: Locatie: remote Uren: in overleg Start: zsm (in overleg) Contract: 6 maanden (grote kans op verlenging) Bij interesse kom ik graag met je in contact! Groeten, Jeffrey

Bekijk vacature »

Lead Developer

Discipline Information Technology Location Venlo (NL) Hours a week 40 As our Lead Developer You will be responsible to create an architectural blueprint in collaboration with product, owner and development team. You align domain architecture with enterprise architecture and you create, influence and apply domain-specific architecture views & viewpoints. You have overview and you can balance long term and near-term priorities What you will do Design solution architecture to ensure a scalable, performant, highly available secure software product Drive adoption of technology standards within a domain Hands-on development of processes and applications in the ecosystem Guide implementations (data cleanup procedures,

Bekijk vacature »

Security Specialist Informatiebeveiliging

Security Specialist Informatiebeveiliging Functiebeschrijving: Help jij onze klanten in de veiligheidssector de stap te maken naar de high performance organisatie van de 21e eeuw? Wat ga je doen? Als Security specialist maak je deel uit van een gedreven club professionals. Jij bent verantwoordelijk voor accreditatie, risicoanalyses van ontworpen IT projecten. Deze rol vereist communicatie en interactie met meerdere ontwikkel- en (test)teams en met andere product eigenaren. Jij bent op de hoogte van verschillende security standaarden om dit beleidsmatig te kunnen integreren. Je bent op de hoogte van nieuwe trends met betrekking tot cybersecurity. Je bent in staat om innovatief een

Bekijk vacature »

Java Developer / Overheid / Complexiteit

Bedrijfsomschrijving Binnen de organisatie zijn meer dan 10.000 medewerkers dagelijks werkzaam op meer dan 30 verschillende locaties. In deze dynamische omgeving is geen dag hetzelfde. Dit komt door de snelheid waarmee veranderingen plaatsvinden. Dagelijks hebben jouw werkzaamheden direct invloed op het transport van mensen, goederen en personeel. Als Java Developer kom je terecht in een hecht team van op de locatie in Assen. Hier zal jij verantwoordelijk worden voor alles wat met Java en de daarbij behorende bedrijfskritische applicaties te maken heeft. De applicatie regelt en registreert alle dagelijkse bezigheden van deze organisatie. Op locatie heb jij dus direct inzicht

Bekijk vacature »

C#/Azure developer

Op zoek naar leuke collega's waarmee je kunt lachen, gave projecten en een ambitieuze werkgever die heel goed voor je zorgt? Aangenaam: Profit4Cloud! Wij zijn nu met 55 collega's en werken sinds 2015 vanuit 5 vestigingen aan mooie projecten met een fijne groep collega's die allemaal maar één ding willen: mooie en slimme software-oplossingen ontwikkelen met de nieuwste technieken. We zijn goed bezig en zijn daarom op zoek naar versterking: Medior C#/Azure developers. Ben jij de Medior C# developer die enthousiast wordt van mooie projecten waar binnen jij een belangrijke rol speelt? Dan is Profit4Cloud jouw 'place-to-be'! Als Medior C#

Bekijk vacature »

Software Developer

Bedrijfsomschrijving Onze klant is een mooie en innovatieve multinational in de regio Utrecht. Ze staan bekend om de hoge kwaliteit van dienstverlening en streven ernaar dit continu te verbeteren. Om dit te kunnen doen zijn zij opzoek naar een Software Developer. Als Software Developer ga je aan de slag met het ontwikkelen van bedrijfskritische software en applicaties. Zo zijn er applicaties en software die van belang zijn voor de bedrijfsvoering, de medewerkers van de organisatie, maar ook voor het klantenbestand van de organisatie. Het landschap is zowel functioneel als technisch en daarmee erg breed. Je komt te werken in een

Bekijk vacature »

Video Algorithm Software Developer

Video algorithm software engineer and developer Functie-eisen Your tasks: Implementing and improving video signal processing algorithms for mobile, PC, and TV apps Cooperating and interacting with a team of specialists and developers. Able to give guidance / input on further quality and implementation optimizations Further tune our HDR system implementation to work optimally in broadcast and OTT infrastructures Interact with prospective customers, answer their questions Solve performance issues on the spot when required due to tests and trials Propose and analyze future ways to optimize the video processing implementation and implement them Interaction with the commercial team to define and

Bekijk vacature »

Java developer (medior & senior)

Op zoek naar leuke collega's waarmee je kunt lachen, gave projecten en een ambitieuze werkgever die heel goed voor je zorgt? Aangenaam: Profit4Cloud! Wij zijn nu met 55 collega's en werken sinds 2015 vanuit 5 vestigingen aan mooie projecten met een fijne groep collega's die allemaal maar één ding willen: mooie en slimme software-oplossingen ontwikkelen met de nieuwste technieken. We zijn goed bezig en zijn daarom op zoek naar versterking: Java Software Engineers met ervaring in back-end en front-end software ontwikkeling. Ben jij de Java Software Engineer die enthousiast wordt van mooie projecten waar binnen jij een belangrijke rol speelt?

Bekijk vacature »

Front-end Developer WPF

Heb jij kennis en ervaring met WPF en C#? Ben je technisch en heb je goed gevoel voor design? Wil jij met jouw kennis de zorg verbeteren? Dan zijn wij op zoek naar jou! Jouw baan Als Front-end Developer bij Zorgplatform ga je werken aan de interface voor zorgprofessionals. Zorgplatform is een platform waarmee medische gegevens op een veilige manier uitgewisseld worden met andere instanties binnen de zorgsector. Zorgplatform ondersteunt onder andere het verwijzen van patiënten, het overdragen van patiënten en de gezamenlijke behandeling (shared care). Dit is hét nieuwe werken in de zorg. Met jouw oog voor design ga

Bekijk vacature »

Pagina: 1 2 3 volgende »

Ozzie PHP

Ozzie PHP

24/06/2011 03:15:48
Quote Anchor link
Ik dacht dat de volgorde waarin je elementen in je css bestand plaatst bepalend is voor de uitvoer.

Om mijn css bestand overzichtelijk te houden, ben ik aan het experimenteren om alles binnen dat bestand op alfabetische volgorde te zetten. Dit "verplichtte" mij tot het onderstaande:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
p #INSTALL strong {
   font-size:13px;
}

p strong {
   font-size:15px;
}


De I van INSTALL komt eerder dan de s van strong dus daarom moet p #INSTALL strong boven p strong staan.

Nu heb ik het volgende stukje html:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<p>
   Blablabla<br>
   <span id="INSTALL">
      Blabla<br>
      <strong>blablablabla</strong>.
   </span>
</p>


Nu had ik eigenlijk verwacht dat ie binnen de span de font-size van p strong zou pakken, ofwel 15px. Maar dat doet ie (gelukkig!) niet, hij houdt namelijk de font-size van 13px aan. Maar ik vraag me af hoe dat kan. Je zou toch verwachten dat ie de font-size van p strong (15px) zou pakken omdat die onderaan staat en de waarde van p #INSTALL strong overschrijft... tenminste dat dacht ik. Maar dat gebeurt dus niet en ik vraag me af waarom niet... iemand een idee?
Gewijzigd op 24/06/2011 10:22:52 door Ozzie PHP
 
PHP hulp

PHP hulp

25/01/2021 18:50:16
 
Dos Moonen

Dos Moonen

24/06/2011 07:22:44
Quote Anchor link
Geen van je CSS rules zullen effet hebben omdat er geen <strong> tag in een <p> tag staat.
Nog erg handing om CSS te begrijpen:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/
 
Wouter J

Wouter J

24/06/2011 09:46:17
Quote Anchor link
Wat er op de pagina komt heeft niks te maken met de volgorde van CSS, maar met de manier van selecteren. Om dat even goed uit te leggen heb ik het volgende:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<div class="container">
  <h1>Hallo</h1>
  <p>Wereld</p>
</div>
<div id="box" class="container">
  <h1>Hallo</h1>
</div>


Nu zal de pagina eerst alles gaan invoegen die je selecteert met div/h1/p/div h1/div p enz.
Zodra dat gedaan is gaat hij naar de volgende stap. Hij bekijkt nu alle classes en gaat die style overrulen met de style die er stond van de eerste stap. Als dit klaar is komen de id's aan de beurt. Alleen style van de id's worden nu ingevoegd en dit wordt weer overruled.

Als je deze CSS code hebt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
div { width: 100px; height: 100px; background: red; }
div.container { background: green; }
div#box { background: blue; }

Krijg je dat beide divs 100x100px zijn. En je krijgt dat de eerste div groen is en de 2e blauw. Zodra je nog een div zal toevoegen met geen class of id zal deze rood zijn.

Let wel op, 1 keer maakt de volgorde wel uit. Namelijk bij een anchor. De goede volgorde is :link :visited :hover :active te onthouden uit het ezelsbruggetje: LoVe HAte
Gewijzigd op 24/06/2011 09:47:47 door Wouter J
 
Ozzie PHP

Ozzie PHP

24/06/2011 10:33:40
Quote Anchor link
@Dos: oeps... die <strong> stond er wel gewoon in maar heb ik er in het voorbeeld blijkbaar uit gesloopt (misschien toch wat eerder naar bed gaan :-))

@Wouter: thanks voor de toelichting.

Als ik jou goed begrijp dan zou dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
div { width: 100px; height: 100px; background: red; }
div.container { background: green; }
div#box { background: blue; }


of dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
div#box { background: blue; }
div.container { background: green; }
div { width: 100px; height: 100px; background: red; }


dus hetzelfde resultaat opleveren? Dat wist ik niet. Ik had verwacht dat alle div'jes nu rood zouden zijn. Dus eerst wordt gekeken naar de meest algemene property, in dit geval div. Daarna naar de classes (div.container) en daarna naar de id's (div#box). Correct?

Het valt me trouwens op dat jij div#box gebruikt terwijl je ook kunt zeggen #box (zonder div). Is daar een bewuste reden voor? En schrijf jij altijd de css naast elkaar in plaats van onder elkaar?

Zou je een voorbeeldje kunnen geven van dat LoVe HAte?
 
Wouter J

Wouter J

24/06/2011 15:55:05
Quote Anchor link
Ozzie PHP:
Als ik jou goed begrijp dan zou dit
[...code...]
of dit
[...code...]
dus hetzelfde resultaat opleveren?

Inderdaad.
Ozzie PHP:
Het valt me trouwens op dat jij div#box gebruikt terwijl je ook kunt zeggen #box (zonder div). Is daar een bewuste reden voor?

Ja, je moet proberen om met het selecteren van CSS zo precies mogelijk te zijn. Het maakt je CSS iets sneller omdat hij nu niet meer naar alle tags moet kijken, maar naar alleen de div tags.
Ozzie PHP:
En schrijf jij altijd de css naast elkaar in plaats van onder elkaar?

Ik schrijf de CSS altijd onderelkaar, maar voor 1 bepaalde propertie (zoals background: blue;) niet. Dus div#box zou ik zo laten de andere niet. Mijn CSS ziet er atlijd zo uit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
div.container
{
  width: 100px;
  height: 100px;
  background: blue;

  font-family: 'Helvetica', Verdana, Arial, sans-serif;
  font-size: 10pt;
}


Maar vaak werk ik met SASS ( http://www.sass-lang.org ). Hiermee maak ik altijd .sass file's aan die zonder {} en ; werken en dan compress ik de files altijd, zo krijg je een overzichtelijke handige code en wordt het voor de gebruiker snel gemaakt. Voor meer informatie over SASS raad ik deze tutorialreeks aan: http://net.tutsplus.com/sessions/mastering-sass/
Ozzie PHP:
Zou je een voorbeeldje kunnen geven van dat LoVe HAte?

Met LoVe HAte bedoel ik dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a:link /* Alle anchor tags met een href */
{
  text-decoration: none;
  color: #333;
}
a:visited /* Zodra je al ooit op de pagina bent geweest */
{
  color: #000;
}
a:hover /* Zodra je over een anchor tag gaat */
{
  color: #000;
  text-deocration: underlined;
}
a:active /* Zodra je op de link klikt */
  color: #333;
  text-decoration: underlined;
}

Zodra je dit in een andere volgorde zet kan het onverwachte dingen doen.
Gewijzigd op 24/06/2011 15:58:01 door Wouter J
 
Ozzie PHP

Ozzie PHP

24/06/2011 16:02:07
Quote Anchor link
Thanks Wouter, ik leer weer wat bij :)

"Ja, je moet proberen om met het selecteren van CSS zo precies mogelijk te zijn. Het maakt je CSS iets sneller omdat hij nu niet meer naar alle tags moet kijken, maar naar alleen de div tags."

Is dat serieus? Dat wist ik echt niet... waar heb je dat gelezen? Ik wil er meer over weten. Da's goede informatie :)
 
Wouter J

Wouter J

24/06/2011 16:45:34
Quote Anchor link
@Ozzie, dat had ik een keer gelezen op forums. Maar na wat zoeken op google kom ik erop uit dat dit juist inefficiënt is, ook ik heb weer wat geleerd. :) De pagina met veel tips voor een goede CSS: http://code.google.com/intl/nl-NL/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
 
Ozzie PHP

Ozzie PHP

24/06/2011 19:09:15
Quote Anchor link
Haha.. komisch zeg :)

Alhoewel ik op die pagina wel iets raars zie. Er staat:

*****
Use class selectors instead of descendant selectors.
For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:

ul li {color: blue;}
ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.
*****

Dit is toch heel vreemd eigenlijk? Hier staat dus dat je een element beter een class kunt meegeven dan dat je het element aanspreekt via bestaande tags.

Je unordered list zou er dan dus zo uitzien:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
   <li class="unordered-list-item">hier staat iets</li>
</ul>


En in je css zou je dan krijgen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.unordered-list-item {
   color:red;
}


Maar op deze manier zit je toch je hele html te vervuilen door al die classes erin te zetten?

Zou het verschil met dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
ul li {
   color:red;
}


echt de moeite waard zijn om daar je html bestand voor te vervuilen?
 
The Force

The Force

24/06/2011 23:44:49
Quote Anchor link
Het voordeel is dat je nu specifiek aangeeft dat je dat element gestyled wilt hebben. Als je menu toevallig ook uit een lijst is opgebouwd dan wordt die ook niet rood. Maar het is zeer onzinnig om bovenstaande constructie uit te voeren. Als je specifiek een element aan wil spreken dan kan je net zo goed de ul of de ol een class meegeven :).
 

24/06/2011 23:49:36
Quote Anchor link
Let wel op met de descendant, dat is wat anders dan de child selector.
Een descendant is zoiets als een kleinkind, een child is gewoon een kind.
 
Ozzie PHP

Ozzie PHP

24/06/2011 23:49:57
Quote Anchor link
Dat laatste lijkt mij ook logischer.... maar wat er in feite wordt gezegd is, als ik het goed begrijp dat stel wanneer dit je html is:

<p>
Hier een tekst en <strong>dit moet dik en rood</strong>.
</p>

Ik zou dan zeggen:

p strong {
color:red;
}

maar volgens die site zou je dus dit moeten doen.

<p>
Hier een tekst en <strong class="p-strong">dit moet dik en rood</strong>.
</p>

.p-strong {
color:red;
}

Dat slaat toch nergens op? :-s




Toevoeging op 24/06/2011 23:50:59:

@Karl: wat bedoel je daar precies mee te zeggen?
 
Wouter J

Wouter J

25/06/2011 00:03:29
Quote Anchor link
Ik denk dat karl bedoelt dat hierbij:
ul li
li een child is van ul en hierbij:
div ul li
li een descant (kleinkind) van div is.
 
Ozzie PHP

Ozzie PHP

25/06/2011 00:05:58
Quote Anchor link
Ah oke... hoe denk jij dan over mijn opmerking over p strong?
 

25/06/2011 00:11:27
Quote Anchor link
Wouter J op 25/06/2011 00:03:29:
Ik denk dat karl bedoelt dat hierbij:
ul li
li een child is van ul en hierbij:
div ul li
li een descant (kleinkind) van div is.


Ja.
Je kunt daarmee rare resultaten krijgen bijvoorbeeld de volgende html:
<div><p>blaat</p><span>blup</span></div>
Met deze css selector:
div p
wordt ook op de span uitgevoerd, terwijl:
div > p
alleen op blaat wordt gedaan.

Verder kan het inderdaad wel zo zijn dat als een element een unieke class / id heeft sneller gevonden / gestyled kan worden. Als er gebruik wordt gemaakt van selectors die een element vinden betekend dat, dat de browser dat element helemaal expliciet moet opzoeken. Terwijl bijvoorbeeld al in de DOM mogelijk is om elementen met een bepaalde class of id te krijgen.
Gewijzigd op 25/06/2011 00:14:43 door
 
Ozzie PHP

Ozzie PHP

25/06/2011 00:15:50
Quote Anchor link
Oké... ik snap wat je bedoelt, maar ben nog steeds benieuwd wat jullie vinden van mijn voorbeeld met p strong. Wat is volgens jullie de juiste manier?
 

25/06/2011 00:20:05
Quote Anchor link
Er is geen juiste manier.
 
Ozzie PHP

Ozzie PHP

25/06/2011 00:24:09
Quote Anchor link
Volgens die site zou je dus dit moeten doen:

<p>
Hier een tekst en <strong class="p-strong">dit moet dik en rood</strong>.
</p>

.p-strong {
color:red;
}

Maar persoonlijk vind ik dat raar. Wat vinden jullie?
 
The Force

The Force

25/06/2011 10:10:02
Quote Anchor link
Het gaat bij die link puur om performance. Het is nu eenmaal eenvoudiger om de DOM af te zoeken naar een specifieke class dan naar elementen die voldoen aan een bepaald criteria en één of andere child/descendant hebben. Dat is wat de pagina aangeeft. Het credo bij performance tuning op dit gebied: ga er tijd in stoppen als je er problemen mee ondervind (don't fix it if it isn't broken). Hetzelfde geld voor PHP optimalisatie. Deze optimalisaties zijn voor de meeste websites nutteloos. CSS wordt lokaal bij de gebruiker uitgevoerd in een fractie van een fractie. De grootste performancewinst die je kan boeken is door zo weinig mogelijk requests uit te voeren en je HTML/CSS/JS bestanden zo klein mogelijk te houden (comprimeren, gzippen).

Hoe je het wel op kan vatten: als je element al een class heeft kan je net zo goed die gebruiken.
 
Wouter J

Wouter J

25/06/2011 11:30:42
Quote Anchor link
The Force:
De grootste performancewinst die je kan boeken is door zo weinig mogelijk requests uit te voeren en je HTML/CSS/JS bestanden zo klein mogelijk te houden (comprimeren, gzippen).

Een andere grote performance winst is door zo min mogelijk reflows te maken. Dit heeft voornamelijk te maken met JS. Een uitgebreide uitleg hierover: http://www.youtube.com/watch?v=q_O9_C2ZjoA
 
Ozzie PHP

Ozzie PHP

25/06/2011 15:01:50
Quote Anchor link
Leuk filmpje Wouter... maar om met al die zaken rekening te houden, pfff dat is nogal wat... dus wat dat betreft ben ik het wel met The Force eens dat je er pas tijd in moet gaan stoppen als je er problemen van ondervindt.

Maar goed, wat betreft dat css verhaal, ik ben nog maar net bezig met mijn framework, dus nu kan ik nog de "juiste" methode toepassen. En ik ben dus nog steeds benieuwd wat jullie zouden doen:

optie 1:

<p>
Hier een tekst en <strong>dit moet dik en rood</strong>.
</p>

p strong {
color:red;
}

optie 2:

<p>
Hier een tekst en <strong class="p-strong">dit moet dik en rood</strong>.
</p>

.p-strong {
color:red;
}
 
Wouter J

Wouter J

25/06/2011 15:45:14
Quote Anchor link
Ik zou gewoon optie 1 gebruiken, het performance verschil is erg weinig en het is beter voor je code denk ik als je 1 gebruikt.

Ik heb een paar testen gedaan met 3 verschillende codes. De HTML was:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="UTF-8">
        <title>CSS performance</title>
        <style>
        </style>
    </head>
    <body>
        <p>
        Some text here and then on an gegiven moment there is a <strong>strong tag</strong> and a <b>bold tag</b>.
        </p>
    </body>
</html>

Vervolgens heb ik de strong tag geselecteerd met:
p strong
p > strong
.p-strong

De resultaten waren dat de 2e het snelst is en de andere 2 ong. even snel zijn. Voor exacte gegevens hier de resultaten: http://i55.tinypic.com/nbu9o4.png
 

Pagina: 1 2 3 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.