Inleiding

Onder wat treedt bij het kopïeren en plakken gemakelijk vervuiling van de code. Dit wordt vaak zichtbaar in de knoppen. Hieronder een voorbeeld van een vervuilt en opgeschoond stukje code.

Vervuilde code

<p><a class="button" href="https://www.kerkopschouwen.nl/informatie/nieuws/collectes" style="background-image: none; background-position: 0% 0%; background-size: auto; background-repeat: repeat; background-attachment: scroll; background-origin: padding-box; background-clip: border-box;" target="_blank"><span style="color: rgb(0, 0, 0);">Collectedoelen</span></a></p>

<p style="color: rgb(85, 85, 85); font-family: sans-serif,Arial,Verdana,&amp;quot;Trebuchet MS&amp;quot;; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><span style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(53, 165, 179); border-radius: 2px; color: rgb(0, 0, 0); cursor: pointer; display: inline-block; font-size: 13px; line-height: 1; padding: 10px 20px 8px; text-decoration: none; text-transform: uppercase;"><a class="button" href="https://www.kerkopschouwen.nl/activiteiten/kerkdienst-gemist-461" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(53, 165, 179); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: rgb(255, 255, 255); cursor: pointer; display: inline-block; font-size: 13px; line-height: 1; padding-bottom: 8px; padding-left: 20px; padding-right: 20px; padding-top: 10px; text-decoration: none; text-transform: uppercase;" target="_blank">Kerkdienst beluisteren</a></span></p>

Opgeschoonde code

<p><a class="button" href="https://www.kerkopschouwen.nl/informatie/nieuws/collectes" target="_blank">Collectedoelen</a></p>

<p><a class="button" href="https://www.kerkopschouwen.nl/activiteiten/kerkdienst-gemist-461" target="_blank">Kerkdienst beluisteren</a></span></p>

<p><a class="button" href="https://www.kerkopschouwen.nl/informatie/nieuws/liturgie-overdenking-pelgrimaskerk">Liturgie</a></p>

Wat is het verschil?

Alle extra toegevoegde stijlinformatie is verwijderd. Deze is aanwezig in de vorm van style="[stijlinformatie]". Het is van belang dat al deze stijlinformatie voor het specifieke element wordt verwijderd, zodat alleen de globale stijlconfiguratie van toepassing.