Bij het ontwerpen van websites is het van belang om uit te zoeken welke browsers er nog gebruikt worden en welke TLS versies er nog gebruikt mogen worden.
Om veiligheids redenen zijn SSLv2, SLLv3 al lange tijd als onveilig beschouwd. Webites zouden deze al lang niet meer mogen gebruiken. Een brouwser als IE6 ondersteund alleen SSLv3 en kunnen we vergeten.
Ook TLSv1.0 was al een tijdje niet geschikt voor e-commerce. Sinds april 2020 is het gebruik van TLSv1.0 en TLSv1.1 vervallen. We houden nu TLSv1.2 en TLSv1.3 over voor https verkeer.
| Protocol | Published | Status |
|---|---|---|
| SSL 1.0 | Unpublished | Unpublished |
| SSL 2.0 | 1995 | Vervallen in 2011 |
| SSL 3.0 | 1996 | Vervallen in 2015 |
| TLS 1.0 | 1999 | Vervallen in 2020 |
| TLS 1.1 | 2006 | Vervallen in 2020 |
| TLS 1.2 | 2008 | |
| TLS 1.3 | 2018 |
Het gebruik van protocollen wordt in de server-configuratie geregeld. Er wordt geprobeerd de veiligste verbinding op te bouwen.
Onder een lijst met browsers waarbij vanaf welke versie die nog bruikbaar is voor welke versie van TLS.
| Browser | TLSv1.2 | TLSv1.3 |
|---|---|---|
| IE | ≥ 11 | NIET |
| Edge | ≥ 12 | NIET |
| Firefox | ≥ 27 | ≥ 63 |
| Chrome | ≥ 30 | ≥ 70 |
| Safari | ≥ 7 | ≥ 13 |
| Opera | ≥ 17 | ≥ 70 |
Niet alle browsers ondersteunen de nieuwe mogelijkheden van HTML5, CSS3. In de CSS en html-tag overzichten van W3Schools staat bij elke tag welke browsers deze ondersteunen.
We kunnen IE met zijn nukken vergeten. IE 11 is de enigste versie die nog word gebruikt en in de accesslogs komt IE nauwelijks meer voor. IE 11 wordt nog gebruikt in WIN 8.1. De opvolger is Edge 12.
De belangrijkste browsers zijn Firefox, Chrome en Safari. Edge wordt weinig gebruikt, mede door de aggresieve manier van pushen door Google van Chrome voor Windows.
Heeft u nog IE hacks op uw webpagina's dan kunt u ze verwijderen.
Safari 10 and Edge 14 were the first browsers to fully support ES6.
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
|---|---|---|---|---|
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
Veel website zijn op b.v. een ipad 3, een tablet die nog veel gebruikt wordt, een zooitje. Dit komt vooral door het gebruik van javascript die te modern is. Javascript dient zoveel mogelijk gemeden te worden en door php funties laten uitvoeren.
Bootstrap 3, 4 en 5 gebruiken veel javascript. W3CSS doet het zonder.
In de begindagen van het internet had iederen een CRT scherm. Die hadden resoluties van 640 × 480 px, 800 × 600 px, 1024 × 768 px en de grotere schermen zelfs 1280 × 960 px in een verhouding van 4:3.
Op deze schermen was de tekst altijd leesbaar. Dit kwam doordat de regellengte relatief kort is en de ogen altijd met gemak de volgende regel kunnen vinden op het scherm.
Met de komst van de flat-screens begon het probleem dat de schermen te breed werden. Zeker toen de breedbeeld modellen in opkomst kwamen. Veel van de breedbeeldschermen zijn van het full-HD type met een beeldverhouding van 16:9 met 1920 × 1080 px. Deze hebben een diagonaal van 22" of meer en zijn moeilijker te lezen als teksten over de volle breedte worden weer gegeven, zekers als deze per alinea meerdere regels heeft. Men verliest de oriëntatie.
Om op brede schermen de teksten leesbaar te houden moet de breedte worden begrensd. Als de pagina op een 1280 px scherm goed weergeven wordt inclusief scrollbar dan hebben we een goed uitgangs punt. De tekst dient dan wel gecentreerd te worden weergegeven.
4K schermen hebben een resoltie van 3840 × 2.160 px.
Op een scherm van een desktop of laptap kunnen we goed uit de voeten met 1280 px, maar met tablets of smartphones wordt dat lastiger. Hoewel veel tablets een desktop versie goed kunnen weergeven, wordt dat bij een smartphone een ander verhaal. Zeker omdat deze apparaten in portrait (verticaal) mode worden gebruikt en niet in landscape (horizontaal) mode zoals beeldschermen.
Smartphones en tablets kunnen zowel verticaal als horizontaal gebruikt worden. Desktop en laptop schermen worden altijd horizontaal gebruikt evenals tv schermen.
Voor printers kan men een eigen stylesheet gebruiken en deze voor afdrukken optimaliseren. Men kan zelfs delen van een pagina weg laten.
Met deze techniek kunnen we webpagina's optimaal weergeven op diversen apparaten. Het wordt volledig met CSS geregeld.
Om een responsive design te maken beginnen we met het toevoegen van een meta tag in de head sectie.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Een <meta> viewport-element geeft de browser instructies voor het beheren van de afmetingen en schaal van de pagina.
Met het gedeelte width=device-width wordt de breedte van de pagina ingesteld om de schermbreedte van het apparaat te volgen (dit is afhankelijk van het apparaat).
Het initial-scale=1.0 deel stelt het initiële zoomniveau in wanneer de pagina voor het eerst wordt geladen door de browser.
Het apparaat gebruikt de @media-regel om alleen een blok CSS-eigenschappen te gebruiken als een bepaalde voorwaarde waar is.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Een break-point is een min-width of max-width waarde waarvoor andere regels gelden.
De waardes zijn redelijk standaard, maar het ontwerp van een site kan andere breakpoints vereisen. Zie style.css welke voor de homepage wordt gebruikt.