diff options
Diffstat (limited to 'files/nl/learn')
| -rw-r--r-- | files/nl/learn/css/css_layout/positioning/index.html (renamed from files/nl/learn/css/css_layout/positionering/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/css/first_steps/index.html | 64 | ||||
| -rw-r--r-- | files/nl/learn/forms/advanced_form_styling/index.html (renamed from files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/forms/basic_native_form_controls/index.html (renamed from files/nl/learn/html/forms/the_native_form_widgets/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/forms/how_to_structure_a_web_form/index.html (renamed from files/nl/learn/html/forms/how_to_structure_an_html_form/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/forms/index.html (renamed from files/nl/learn/html/forms/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html | 1968 | ||||
| -rw-r--r-- | files/nl/learn/forms/sending_and_retrieving_form_data/index.html (renamed from files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/forms/styling_web_forms/index.html (renamed from files/nl/learn/html/forms/styling_html_forms/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/forms/your_first_form/index.html (renamed from files/nl/learn/html/forms/your_first_html_form/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/css_basics/index.html (renamed from files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html (renamed from files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html (renamed from files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/html_basics/index.html (renamed from files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html (renamed from files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html (renamed from files/nl/learn/getting_started_with_the_web/publicatie_website/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html (renamed from files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html (renamed from files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html (renamed from files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/debugging_html/index.html (renamed from files/nl/learn/html/introduction_to_html/html_debuggen/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html (renamed from files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html (renamed from files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html (renamed from files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html (renamed from files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/multimedia_and_embedding/index.html (renamed from files/nl/learn/html/multimedia_inbedden/index.html) | 3 | ||||
| -rw-r--r-- | files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html | 270 | ||||
| -rw-r--r-- | files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html (renamed from files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html) | 3 |
27 files changed, 2350 insertions, 24 deletions
diff --git a/files/nl/learn/css/css_layout/positionering/index.html b/files/nl/learn/css/css_layout/positioning/index.html index a46d73a38b..647827a3b7 100644 --- a/files/nl/learn/css/css_layout/positionering/index.html +++ b/files/nl/learn/css/css_layout/positioning/index.html @@ -1,6 +1,6 @@ --- title: Positionering -slug: Learn/CSS/CSS_layout/Positionering +slug: Learn/CSS/CSS_layout/Positioning tags: - Article - Beginner @@ -13,6 +13,7 @@ tags: - absoluut - relatief translation_of: Learn/CSS/CSS_layout/Positioning +original_slug: Learn/CSS/CSS_layout/Positionering --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/css/first_steps/index.html b/files/nl/learn/css/first_steps/index.html new file mode 100644 index 0000000000..87e9ffe703 --- /dev/null +++ b/files/nl/learn/css/first_steps/index.html @@ -0,0 +1,64 @@ +--- +title: Voor Beginners +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/CSS/Voor_Beginners +--- +<p> +</p> +<h3 id="Introductie" name="Introductie"> Introductie </h3> +<p>Deze cursus is een introductie op <b>Cascading Style Sheets</b> (<b>CSS</b>). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. +</p> +<ul><li> Deel I illustreert de standaardeigenschappen van CSS, die werken in Mozilla browsers en ook in de meeste andere moderne browsers. +</li></ul> +<ul><li> Deel II bevat een aantal voorbeelden van speciale functies die werken in Mozilla, maar die niet noodzakelijk werken in andere omstandigheden. +</li></ul> +<p>Deze cursus is gebaseerd op de <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specificatie</a>. +</p> +<h4 id="Wie_zou_deze_cursus_moeten_gebruiken.3F" name="Wie_zou_deze_cursus_moeten_gebruiken.3F"> Wie zou deze cursus moeten gebruiken? </h4> +<p>Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. +</p><p>Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. +</p><p>Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. +</p><p>Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. +</p> +<h4 id="Wat_heb_je_nodig_voordat_je_begint.3F" name="Wat_heb_je_nodig_voordat_je_begint.3F"> Wat heb je nodig voordat je begint? </h4> +<p>Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. +</p><p>Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. +</p><p>Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. +</p><p><strong>Let op:</strong> CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. +</p> +<h4 id="Hoe_je_deze_cursus_moet_gebruiken" name="Hoe_je_deze_cursus_moet_gebruiken"> Hoe je deze cursus moet gebruiken </h4> +<p>Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. +</p><p>Gebruik de <i>Informatie</i> sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de <i>Actie</i> sectie om CSS te proberen op je eigen computer. +</p><p>Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. +</p><p>Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "<i>Meer details</i>". Gebruik de links daar om referentiemateriaal te vinden over CSS. +</p> +<h3 id="Cursus_Deel_I" name="Cursus_Deel_I"> Cursus Deel I </h3> +<p>Een basis stap-voor-stap gids. +</p> +<ol><li><b><a href="nl/CSS/Voor_Beginners/Wat_is_CSS">Wat is CSS?</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Waarom_CSS_Gebruiken">Waarom CSS Gebruiken?</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Hoe_CSS_Werkt">Hoe CSS Werkt</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/'Cascading'_en_nalatenschap">'Cascading' en nalatenschap</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Selectors">Selectors</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Leesbaar_CSS">Leesbaar CSS</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Text_Stijlen">Text Stijlen</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Kleur">Kleur</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Inhoud">Inhoud</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Lijsten">Lijsten</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Kaders">Kaders</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Layout">Layout</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Tabellen">Tabellen</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/Media">Media</a></b> +</li></ol> +<h3 id="Cursus_Deel_II" name="Cursus_Deel_II"> Cursus Deel II </h3> +<p>Voorbeelden die CSS in Mozilla laten zien. +</p> +<ol><li><b><a href="nl/CSS/Voor_Beginners/JavaScript">JavaScript</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/XBL_Bindingen">XBL Bindingen</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_XUL">CSS en XUL</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_SVG">CSS en SVG</a></b> +</li><li><b><a href="nl/CSS/Voor_Beginners/XML_data">XML data</a></b> +</li></ol> +{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} diff --git a/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html b/files/nl/learn/forms/advanced_form_styling/index.html index 1025b94397..11903ed7b2 100644 --- a/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html +++ b/files/nl/learn/forms/advanced_form_styling/index.html @@ -1,6 +1,6 @@ --- title: Geavanceerde styling van HTML-formulieren -slug: Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren +slug: Learn/Forms/Advanced_form_styling tags: - CSS - Formulieren @@ -10,6 +10,7 @@ tags: - Web - voorbeeld translation_of: Learn/Forms/Advanced_form_styling +original_slug: Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren --- <p>In dit artikel wordt ingegaan op het gebruik van <a href="/nl/docs/Web/CSS">CSS </a>in <a href="nl/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML</a>-formulieren om moeilijk te stijlen widgetsaan te passen. Zoals in vorig artikel werd aangegeven vormen tekstvelden en knoppen geen enkel probleem in CSS. Hier wordt dieper ingegaan op de donkere kant van het stijlen van HTML-formulieren.</p> diff --git a/files/nl/learn/html/forms/the_native_form_widgets/index.html b/files/nl/learn/forms/basic_native_form_controls/index.html index 844466956e..5b83a25f57 100644 --- a/files/nl/learn/html/forms/the_native_form_widgets/index.html +++ b/files/nl/learn/forms/basic_native_form_controls/index.html @@ -1,12 +1,13 @@ --- title: The native form widgets -slug: Learn/HTML/Forms/The_native_form_widgets +slug: Learn/Forms/Basic_native_form_controls tags: - Formulier - HTML - HTML5 - voorbeeld translation_of: Learn/Forms/Basic_native_form_controls +original_slug: Learn/HTML/Forms/The_native_form_widgets --- <p><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML formulieren</a> bestaan uit widgets. Widgets zijn besturingselementen die door elke browser ondersteunt worden. In dit artikel wordt besproken hoe elke widget werkt en hoe goed hij ondersteund wordt door de verschillende browsers.</p> diff --git a/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html b/files/nl/learn/forms/how_to_structure_a_web_form/index.html index ae4ec439c2..9bdc0006b5 100644 --- a/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html +++ b/files/nl/learn/forms/how_to_structure_a_web_form/index.html @@ -1,12 +1,13 @@ --- title: How to structure an HTML form -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +slug: Learn/Forms/How_to_structure_a_web_form tags: - Attribuut - Element - HTML - voorbeeld translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form --- <p>Formulieren zijn een van de meest complexe structuren in <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. Elk basisformulier kan gemaakt worden met elementen en attributen. Door een correcte opbouw wordt een bruikbaar en <a href="/en-US/docs/Web/Accessibility">toegankelijk </a>formulier verkregen.</p> diff --git a/files/nl/learn/html/forms/index.html b/files/nl/learn/forms/index.html index 13853c2ccf..886250cfb7 100644 --- a/files/nl/learn/html/forms/index.html +++ b/files/nl/learn/forms/index.html @@ -1,6 +1,6 @@ --- title: HTML forms guide -slug: Learn/HTML/Forms +slug: Learn/Forms tags: - Featured - Forms @@ -10,6 +10,7 @@ tags: - TopicStub - Web translation_of: Learn/Forms +original_slug: Learn/HTML/Forms --- <p><span class="seoSummary">This guide is a series of articles that will help you master HTML forms.</span> HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!</p> diff --git a/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..2b3f8d8db2 --- /dev/null +++ b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,1968 @@ +--- +title: Compatibiliteitstabel voor formulierelementen +slug: Learn/Forms/Property_compatibility_table_for_form_controls +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +original_slug: Compatibiliteitstabel_voor_formulierelementen +--- +<p>De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.</p> + +<h2 id="Hoe_de_tabellen_lezen">Hoe de tabellen lezen</h2> + +<h3 id="Waarden">Waarden</h3> + +<p>Voor elke eigenschap zijn er vier mogelijke waarden:</p> + +<dl> + <dt>JA</dt> + <dd>De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.</dd> + <dt>GEDEELTELIJK</dt> + <dd>Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.</dd> + <dt>NEEN</dt> + <dd>De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.</dd> + <dt>N.V.T.</dt> + <dd>De eigenschap heeft geen enkele betekenis voor dit type of element.</dd> +</dl> + +<h3 id="Weergave">Weergave</h3> + +<p>Elke eigenschap wordt op twee manieren weergegeven:</p> + +<dl> + <dt>N (Normaal)</dt> + <dd>Betekent dat de eigenschap gewoon toegepast kan worden.</dd> + <dt>A (Aangepast)</dt> + <dd>Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:</dd> +</dl> + +<pre class="brush: css">* { +/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */ + -webkit-appearance: none; + +/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */ + -moz-appearance: none; + +/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip + van Opera, Internet Explorer en Firefox */ + background: none; +}</pre> + +<h2 id="Compatibiliteitstabellen">Compatibiliteitstabellen</h2> + +<h3 id="Globaal_gedrag">Globaal gedrag</h3> + +<p>Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:</p> + +<dl> + <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> + <dd>Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.</dd> + <dt>{{cssxref("line-height")}}</dt> + <dd>Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.</dd> + <dt>{{cssxref("text-decoration")}}</dt> + <dd>Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.</dd> + <dt>{{cssxref("text-overflow")}}</dt> + <dd>Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Opera ondersteunt {{cssxref("text-shadow")}} niet voor formulierelementen en IE9 ondersteunt het helemaal niet.</dd> +</dl> + +<h3 id="Tekstvelden">Tekstvelden</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li> Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Als de {{cssxref("border-color")}} eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de {{cssxref("color")}} eigenschap toepassen op de rand en font voor {{HTMLElement("textarea")}}.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie de nota over {{cssxref("line-height")}}</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td>Zie nota betreffende Opera</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none </code> aangewend worden. Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none</code> aangewend worden . Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Knoppen">Knoppen</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie nota over {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Number">Number</h3> + +<p>Bij browsers die het <code>number </code>element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het veld aanpast, te wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie nota over {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td colspan="1" rowspan="3"> + <p>Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.</p> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Text and font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakken_(éénregelig)">Keuzevakken (éénregelig)</h3> + +<p>Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[2]</sup></td> + <td> + <ol> + <li>De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.</li> + <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eiegenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakken_(meerregelig)">Keuzevakken (meerregelig)</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie de nota betreffende {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Alleen ondersteund door Firefox en IE9+.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datalist">Datalist</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;"> + <p>Neen</p> + </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Bestandslijst">Bestandslijst</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Veel browsers passen deze eigenschap toe op de selectieknop.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Reageert min of meer als een extra linker marge buiten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Border and background</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datumselectie">Datumselectie</h3> + +<p>Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.<br> + </p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Kleurenselectie">Kleurenselectie</h3> + +<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> + +<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome verbergt de {{HTMLElement("progress")}} en {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Bereik">Bereik</h3> + +<p>Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>{{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Border and background</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Afbeeldingsknoppen">Afbeeldingsknoppen</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td colspan="1"> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html b/files/nl/learn/forms/sending_and_retrieving_form_data/index.html index feea7f5f78..2ba87686f9 100644 --- a/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html +++ b/files/nl/learn/forms/sending_and_retrieving_form_data/index.html @@ -1,6 +1,6 @@ --- title: Formuliergegevens verzenden -slug: Learn/HTML/Forms/Verzenden_van_formuliergegevens +slug: Learn/Forms/Sending_and_retrieving_form_data tags: - Beginner - Bestanden @@ -11,6 +11,7 @@ tags: - Veiligheid - Web translation_of: Learn/Forms/Sending_and_retrieving_form_data +original_slug: Learn/HTML/Forms/Verzenden_van_formuliergegevens --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</div> diff --git a/files/nl/learn/html/forms/styling_html_forms/index.html b/files/nl/learn/forms/styling_web_forms/index.html index f6c3cda07c..ec56d4ffb6 100644 --- a/files/nl/learn/html/forms/styling_html_forms/index.html +++ b/files/nl/learn/forms/styling_web_forms/index.html @@ -1,11 +1,12 @@ --- title: Styling HTML forms -slug: Learn/HTML/Forms/Styling_HTML_forms +slug: Learn/Forms/Styling_web_forms tags: - CSS - Formulieren - HTML translation_of: Learn/Forms/Styling_web_forms +original_slug: Learn/HTML/Forms/Styling_HTML_forms --- <p>In dit artikel leert de gebruiker het om <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>-formulieren vorm te geven met gebruik van <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>. Dit is echter niet zo eenvoudig. Om historische en technische redenen gaan formulierelementen (widgets) en CSS niet zo goed samen. Daarom maaken veel ontwikkelaars hun eigen HTML widgets om de vormgeving van formulieren in eigen hand te houden. Dankzij de moderne browsers hebben webontwikkelaars meer en meer controle over het ontwerp van formulierelementen.</p> diff --git a/files/nl/learn/html/forms/your_first_html_form/index.html b/files/nl/learn/forms/your_first_form/index.html index 43c489e5a9..0d9705f88e 100644 --- a/files/nl/learn/html/forms/your_first_html_form/index.html +++ b/files/nl/learn/forms/your_first_form/index.html @@ -1,12 +1,13 @@ --- title: My first HTML form -slug: Learn/HTML/Forms/Your_first_HTML_form +slug: Learn/Forms/Your_first_form tags: - CSS - Formulier - HTML - voorbeeld translation_of: Learn/Forms/Your_first_form +original_slug: Learn/HTML/Forms/Your_first_HTML_form --- <p>Dit is een inleidend artikel tot HTML formulieren. Door middel van een eenvoudig contactformulier maken we kennis met de basiselementen van HTML formulieren. Dit artikel veronderstelt dat de lezer niets afweet van HTML formulieren, maar dat hij een basiskennis heeft van <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML">the basics of HTML</a> en <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS</a>.</p> diff --git a/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html b/files/nl/learn/getting_started_with_the_web/css_basics/index.html index 8b24396a2f..6ac3c8a401 100644 --- a/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html +++ b/files/nl/learn/getting_started_with_the_web/css_basics/index.html @@ -1,6 +1,6 @@ --- title: De basisbegrippen van CSS -slug: Learn/Getting_started_with_the_web/CSS_basisbegrippen +slug: Learn/Getting_started_with_the_web/CSS_basics tags: - Beginner - CSS @@ -9,6 +9,7 @@ tags: - Stijlen - Web translation_of: Learn/Getting_started_with_the_web/CSS_basics +original_slug: Learn/Getting_started_with_the_web/CSS_basisbegrippen --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html b/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html index 66219f2149..8adbe4dc85 100644 --- a/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html +++ b/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,6 +1,6 @@ --- title: Omgaan met bestanden -slug: Learn/Getting_started_with_the_web/Bestanden_beheren +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - Beginner - Bestanden @@ -10,6 +10,7 @@ tags: - Theorie - website translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/Bestanden_beheren --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html b/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html index 763655de10..ac927f09ec 100644 --- a/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html +++ b/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,6 +1,6 @@ --- title: Hoe werkt het web? -slug: Learn/Getting_started_with_the_web/Hoe_werkt_het_web +slug: Learn/Getting_started_with_the_web/How_the_Web_works tags: - Beginner - Client @@ -12,6 +12,7 @@ tags: - TCP - infrastructuur translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Getting_started_with_the_web/Hoe_werkt_het_web --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html b/files/nl/learn/getting_started_with_the_web/html_basics/index.html index e454602471..1426509266 100644 --- a/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html +++ b/files/nl/learn/getting_started_with_the_web/html_basics/index.html @@ -1,6 +1,6 @@ --- title: De basisbegrippen van HTML -slug: Learn/Getting_started_with_the_web/HTML_basisbegrippen +slug: Learn/Getting_started_with_the_web/HTML_basics tags: - Beginner - CodingScripting @@ -8,6 +8,7 @@ tags: - Leren - Web translation_of: Learn/Getting_started_with_the_web/HTML_basics +original_slug: Learn/Getting_started_with_the_web/HTML_basisbegrippen --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html b/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html index 118139d178..d88e72cdd4 100644 --- a/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html +++ b/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -1,6 +1,6 @@ --- title: Basissoftware installeren -slug: Learn/Getting_started_with_the_web/Basis_software_installeren +slug: Learn/Getting_started_with_the_web/Installing_basic_software tags: - Beginner - Browser @@ -10,6 +10,7 @@ tags: - WebMechanics - tekstverwerker translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +original_slug: Learn/Getting_started_with_the_web/Basis_software_installeren --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html b/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html index 920c4eccbc..791315c9ef 100644 --- a/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html +++ b/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -1,7 +1,8 @@ --- title: De publicatie van je website -slug: Learn/Getting_started_with_the_web/Publicatie_website +slug: Learn/Getting_started_with_the_web/Publishing_your_website translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Learn/Getting_started_with_the_web/Publicatie_website --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html b/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index 9c16e8b1a9..49029503c8 100644 --- a/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html +++ b/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -1,6 +1,6 @@ --- title: Hoe gaat uw website eruitzien? -slug: Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like tags: - Beginner - Benodigdheden @@ -11,6 +11,7 @@ tags: - Ontwerpen - Plannen translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +original_slug: Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html b/files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html index 1413987a12..71c43b4571 100644 --- a/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html +++ b/files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -1,7 +1,8 @@ --- title: Geavanceerde tekstopmaak -slug: Learn/HTML/Introduction_to_HTML/Gevorderde_tekstopmaak +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Learn/HTML/Introduction_to_HTML/Gevorderde_tekstopmaak --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html b/files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html index a00d948b29..d5de570e2e 100644 --- a/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html +++ b/files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -1,7 +1,8 @@ --- title: Hyperlinks maken -slug: Learn/HTML/Introduction_to_HTML/Hyperlinks_maken +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Learn/HTML/Introduction_to_HTML/Hyperlinks_maken --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/introduction_to_html/html_debuggen/index.html b/files/nl/learn/html/introduction_to_html/debugging_html/index.html index e0b791bd12..3e961f9e5d 100644 --- a/files/nl/learn/html/introduction_to_html/html_debuggen/index.html +++ b/files/nl/learn/html/introduction_to_html/debugging_html/index.html @@ -1,7 +1,8 @@ --- title: HTML debuggen -slug: Learn/HTML/Introduction_to_HTML/HTML_Debuggen +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Learn/HTML/Introduction_to_HTML/HTML_Debuggen --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html b/files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html index 1942ef0baa..aaa98f0092 100644 --- a/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html +++ b/files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -1,7 +1,8 @@ --- title: De opmaak van een brief -slug: Learn/HTML/Introduction_to_HTML/Opmaak_van_een_brief +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Learn/HTML/Introduction_to_HTML/Opmaak_van_een_brief --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html b/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index baca13f51b..d698fa5479 100644 --- a/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html +++ b/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -1,7 +1,8 @@ --- title: De inhoud van een webpagina structureren -slug: Learn/HTML/Introduction_to_HTML/Structureren_inhoud_van_webpagina +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Introduction_to_HTML/Structureren_inhoud_van_webpagina --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html b/files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index b6e0307328..8f5bdf79b5 100644 --- a/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html +++ b/files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -1,7 +1,8 @@ --- title: Wat steekt er in het hoofd? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML --- <div>{{LearnSidebar}}</div> diff --git a/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html b/files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html index 5e2662b5ea..1dfbb92bd4 100644 --- a/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html +++ b/files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -1,6 +1,6 @@ --- title: Afbeeldingen in HTML -slug: Learn/HTML/Multimedia_inbedden/Afbeeldingen_in_HTML +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML tags: - Article - Beginner @@ -12,6 +12,7 @@ tags: - figcaption - figure translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +original_slug: Learn/HTML/Multimedia_inbedden/Afbeeldingen_in_HTML --- <div>{LearnSidebar}}</div> diff --git a/files/nl/learn/html/multimedia_inbedden/index.html b/files/nl/learn/html/multimedia_and_embedding/index.html index bd42da37c8..feb8058212 100644 --- a/files/nl/learn/html/multimedia_inbedden/index.html +++ b/files/nl/learn/html/multimedia_and_embedding/index.html @@ -1,7 +1,8 @@ --- title: Multimedia en inbedden -slug: Learn/HTML/Multimedia_inbedden +slug: Learn/HTML/Multimedia_and_embedding translation_of: Learn/HTML/Multimedia_and_embedding +original_slug: Learn/HTML/Multimedia_inbedden --- <p>{{LearnSidebar}}</p> diff --git a/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..7293a38b51 --- /dev/null +++ b/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,270 @@ +--- +title: HTML5 audio en video gebruiken +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Audio + - HTML5 + - Instructie + - Media + - Ogg + - Video + - mp3 + - voorbeeld +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +original_slug: Web/Guide/HTML/HTML5_audio_en_video_gebruiken +--- +<p>HTML5 introduceert ingebouwde media ondersteuning via de {{ HTMLElement("audio") }} en {{ HTMLElement("video") }} elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.</p> + +<h2 id="Media_insluiten">Media insluiten</h2> + +<p>Het insluiten van media in uw HTML document stelt niet zoveel voor:</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> + Uw browser ondersteunt het element <code>video</code> niet. +</video></pre> + +<p>Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.</p> + +<p>En hier is een voorbeeld van het inbedden van een <em>audio</em> element in uw HTML document.</p> + +<pre class="brush: html"><audio src="/test/audio.ogg"> +<p>Het audio element wordt niet door uw browser ondersteund.</p> +</audio></pre> +</div> + +<p>The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> +<p>Het audio element wordt niet door uw browser ondersteund.</p> +</audio></pre> +</div> + +<p>Dit voorbeeld van de code gebruikt attributen van het {{ HTMLElement("audio") }} element:</p> + +<ul> + <li><code>controls</code> : Toont de standaard HTML5 controls ten behoeve van audio op de webpagina.</li> + <li><code>autoplay</code> : Zorgt ervoor dat het bestand automatisch afspeelt.</li> + <li><code>loop</code> : Zorgt ervoor dat het bestand herhaalt wordt.</li> +</ul> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> +</div> + +<p>Het <em>preload</em> attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:</p> + +<ul> + <li><code>"none"</code> maakt dat er geen buffering wordt gebruikt</li> + <li><code>"auto"</code> buffers het mediabestand</li> + <li><code>"metadata"</code> buffers alleen de metagegevens van het bestand</li> +</ul> + +<p>Meerdere bronbestanden kunnen vastgelegd worden met behulp van het {{ HTMLElement("source") }} element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4" type="video/mp4"> + Het <code>video</code> element wordt niet ondersteund door uw browser. +</video> +</pre> + +<p>In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">media formaten die ondersteund worden door de audio en video elementen</a> in de diverse browsers.</p> + +<p><span id="result_box" lang="nl"><span class="hps">U kunt</span> <span class="hps">ook opgeven welke codes</span> <span class="hps">het mediabestand</span> <span class="hps">vereist</span><span>;</span> d<span class="hps">it</span> <span class="hps">maakt het mogelijk</span> voor <span class="hps">de</span> <span class="hps">browser</span> <span class="hps">om nog </span><span class="hps">intelligente</span>re <span class="hps">beslissingen te nemen</span></span>s:</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> + Het <code>video</code> element wordt niet ondersteund door uw browser. +</video></pre> + +<p>We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.</p> + +<p>Wanneer het <code>type</code> attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende <code>source</code> gecontroleerd worden. Wanneer niet een van de <code>source</code> elementen gebruik kan worden, wordt een <code>error</code> gebeurtenis naar het <code>video</code> element verzonden. Wanneer het <code>type</code> attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende <code>source</code> gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.</p> + +<p>Bekijk ook <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media gebeurtenissen</a> voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formaten die ondersteund worden door de audio en video elementen</a>.</p> + +<h2 id="Het_afspelen_van_media">Het afspelen van media</h2> + +<p>Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> methode, zoals deze gedefinieerd is in de {{ interface("nsIDOMHTMLMediaElement") }} interface die gebruikt wordt om media-element te implementeren.</p> + +<p>Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.</p> + +<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> +<div> + <button onclick="document.getElementById('demo').play()">Audio afspelen</button> + <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button> + <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button> + <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button> +</div> +</pre> + +<h2 id="Het_downloaden_van_media_stoppen">Het downloaden van media stoppen</h2> + +<p>Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.</p> + +<p>Bij deze de truck om het downloaden direct te stoppen:</p> + +<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); +mediaElement.pause(); +mediaElement.src=''; +//or +mediaElement.<code>removeAttribute("src");</code> +</pre> + +<p>Door het <code>src</code> attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).</p> + +<h2 id="Het_doorzoeken_van_media">Het doorzoeken van media</h2> + +<p>Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap <code>currentTime</code> op het element; zie hiervoor {{ domxref("HTMLMediaElement") }} voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.</p> + +<p>U gebruikt de eigenschap <code>seekable</code> om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een {{ domxref("TimeRanges") }} object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.</p> + +<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); +mediaElement.seekable.start(); // Retourneert de starttijd (in seconden) +mediaElement.seekable.end(); // Retourneert de einddtijd (in seconden) +mediaElement.currentTime = 122; // Ga naar 122 seconden +mediaElement.played.end(); // Retourneert het aantal seconden dat de browser heeft afgespeeld +</pre> + +<h2 id="Leg_het_afspeelgebied_vast">Leg het afspeelgebied vast</h2> + +<p><span id="result_box" lang="nl"><span class="hps">Bij het opgeven van</span> <span class="hps">de URI</span> <span class="hps">van de</span> <span class="hps">media voor</span> <span class="hps">een</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>audio"</span><span>)}</span><span>} of</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>video"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">kunt</span> <span class="hps">u</span> <span class="hps">desgewenst</span> <span class="hps">aanvullende informatie</span> <span class="hps">geven</span> voor <span class="hps">het deel van de</span> <span class="hps">media</span> <span class="hps">dat afgespeeld moet worden</span><span>.</span> <span class="hps">Om dit te doen</span><span>, voeg</span> <span class="hps">een</span> <span class="hps">hekje</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>#</span><span>"</span><span>), gevolgd</span> <span class="hps">door de media</span> <span class="hps">fragment</span> <span class="hps">beschrijving</span><span>.</span><br> + <br> + <span class="hps">Een tijd</span>sgebied wordt <span class="hps">opgegeven</span> <span class="hps">met de syntaxis</span></span>:</p> + +<pre>#t=[starttime][,endtime]</pre> + +<p><span id="result_box" lang="nl"><span class="hps">De</span> <span class="hps">tijd kan worden</span> <span class="hps">opgegeven als een</span> <span class="hps">aantal seconden</span> <span class="hps atn">(</span><span>als een</span> <span class="hps">floating-point</span> <span class="hps">waarde) of</span> <span class="hps">als een</span> <span class="hps">uren</span> <span class="hps">/</span> <span class="hps">minuten</span> <span class="hps">/</span> <span class="hps">seconden</span> <span class="hps">tijd</span> <span class="hps">gescheiden</span> <span class="hps">met</span> <span class="hps">dubbele punten</span> <span class="hps atn">(</span><span>zoals</span> <span class="hps">02:05:01</span> <span class="hps">2 uur</span><span>,</span> <span class="hps">5</span> <span class="hps">minuten en</span> <span class="hps">1</span> <span class="hps">seconde)</span><span>.</span></span></p> + +<p>Een paar voorbeelden:</p> + +<dl> + <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> + <dd>Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> + <dd>Speel de video af vanaf het begin tot en met 10,5 seconden.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> + <dd>Speel de video af vanaf het begin en voor de duur van 2 uur.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> + <dd>Speel de video af vanaf de 60ste seconden en speel tot het einde.</dd> +</dl> + +<div class="note"> +<p>The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p> +</div> + +<h2 id="Uitwijkmogelijkheden">Uitwijkmogelijkheden</h2> + +<p><span id="result_box" lang="nl"><span class="hps">HTML</span> <span class="hps">opgenomen</span> <span class="hps">tussen</span> <span class="hps">bijvoorbeeld</span> <span class="hps">de openings- en de sluit</span><span class="hps">tags van</span> <span class="hps">media-elementen</span> <span class="hps">wordt verwerkt</span> <span class="hps">door browsers</span> <span class="hps">die geen ondersteuning hebben voor</span> <span class="hps">HTML5</span> <span class="hps">media</span><span>.</span> <span class="hps">U kunt profiteren</span> <span class="hps">van dit feit</span> <span class="hps">om alternatieve</span> <span class="hps">fallback</span> <span class="hps">media</span> <span class="hps">te bieden</span> <span class="hps">voor die</span> <span class="hps">browsers</span><span>.</span><br> + <br> + <span class="hps">Dit gedeelte bevat</span> <span class="hps">twee mogelijke</span> <span class="hps">fallback</span> <span class="hps">opties</span> <span class="hps">voor video</span>. Voor<span class="hps"> elk</span> <span class="hps">geval</span><span>,</span> als <span class="hps">de</span> <span class="hps">browser HTML5</span> <span class="hps">video</span></span><span lang="nl"> <span class="hps">ondersteunt</span><span>,</span> dan wordt die <span class="hps">gebruikt</span><span>;</span> <span class="hps">in alle andere gevallen wordt </span><span class="hps">de optie</span> <span class="hps">fallback</span> <span class="hps">gebruikt</span><span>.</span></span></p> + +<h3 id="Het_gebruik_van_Flash">Het gebruik van Flash</h3> + +<p><span id="result_box" lang="nl"><span class="hps">U kunt</span> <span class="hps">Flash</span> <span class="hps">gebruiken om een</span> <span class="hps">Flash-formaat</span> <span class="hps">film af te spelen</span> <span class="hps">als de</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>video"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">niet wordt ondersteund</span><span>:</span></span></p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video></pre> + +<p><span id="result_box" lang="nl"><span class="hps">NB: gebruik geen</span> </span><code>classid</code><span lang="nl"> <span class="hps">in het object</span><span>-tag</span> <span class="hps">om</span> <span class="hps">compatibel te zijn/blijven met andere</span> <span class="hps">browsers dan Internet Explorer</span></span>.</p> + +<h3 id="Ogg_videos_afspelen_met_gebruik_van_een_Java_applet">Ogg videos afspelen met gebruik van een Java applet</h3> + +<p>Er is een Java applet<a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor HTML5 video:</p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video></pre> + +<p><span id="result_box" lang="nl"><span class="hps">Als u geen</span><span class="hps"> alternatief</span> <span class="hps">kind</span>-<span class="hps">element</span> creëert <span class="hps">van</span> het <span class="hps">cortado</span> <span class="hps">object</span> <span class="hps">element, zoals</span> het <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps">"p"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">hierboven</span><span>, dan zullen</span> <span class="hps">FireFox</span> <span class="hps">3.5</span> <span class="hps">installaties die</span> <span class="hps">de video</span> <span class="hps">native</span> <span class="hps">behandelen, maar</span> <span class="hps">geen</span> <span class="hps">Java</span> <span class="hps">geïnstalleerd</span> hebben ten <span class="hps">onrechte</span> <span class="hps">de</span> <span class="hps">gebruiker informeren</span> <span class="hps">dat ze een </span><span class="hps">plugin</span> <span class="hps">moeten installeren om</span> <span class="hps">de inhoud</span> <span class="hps">op</span> <span class="hps">de</span> <span class="hps">pagina te bekijken</span><span>.</span></span></p> + +<p>{{ h1_gecko_minversion("Foutafhandeling", "2.0") }}</p> + +<p>Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De <code>error</code> gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.</p> + +<p>Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:</p> + +<pre class="brush: html"><video> +<source id="mp4_src" + src="video.mp4" + type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> +</source> +<source id="3gp_src" + src="video.3gp" + type='video/3gpp; codecs="mp4v.20.8, samr"'> +</source> +<source id="ogg_src" + src="video.ogv" + type='video/ogg; codecs="theora, vorbis"'> +</source> +</video></pre> + +<p>Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen {{ HTMLElement("source") }} elementen met de ID's "mp4_src" en "3gp_src" in een <code>error</code> gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.</p> + +<h3 id="Detecteren_of_er_geen_bronnen_zijn_geladen">Detecteren of er geen bronnen zijn geladen</h3> + +<p>Om vast te stellen dat niet een {{ HTMLElement("source") }} kindelement is geladen kunt u de waarde van het attribuut <code>networkState</code> van het media-element controleren, Wanneer de waarde <code>HTMLMediaElement.NETWORK_NO_SOURCE</code> is dan weet u dat geen van de bronnen geladen is.</p> + +<p>Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw {{ HTMLElement("source") }} element als child van het media element en Gecko zal een poging doen om die bron te laden.</p> + +<h3 id="Inhoud_tonen_wanneer_geen_bron_gedecodeerd_kon_worden">Inhoud tonen wanneer geen bron gedecodeerd kon worden</h3> + +<p><span id="result_box" lang="nl"><span class="hps">Een andere manier om</span> <span class="hps">de</span> <span class="hps">fallback</span> <span class="hps">inhoud</span> van <span class="hps">een video te tonen</span> <span class="hps">als geen van</span> <span class="hps">de</span> <span class="hps">bronnen</span> <span class="hps">kan</span> <span class="hps">worden</span> <span class="hps">gedecodeerd</span> <span class="hps">in</span> <span class="hps">de</span> <span class="hps">huidige</span> <span class="hps">browser</span><span>'s is het</span> <span class="hps">toevoegen</span>van foutafhandeling in <span class="hps">het</span> <span class="hps">laatste</span> <span class="hps">bronelement</span><span>.</span> <span class="hps">Dan kunt u de</span> <span class="hps">video</span> <span class="hps">vervangen</span> <span class="hps">met zijn</span> <span class="hps">fallback</span> <span class="hps">inhoud</span></span>:</p> + +<pre class="brush: html"><video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> + </a> + <p><span id="result_box" lang="nl"><span class="hps">Klik op de afbeelding</span> <span class="hps">om een video</span> <span class="hps">demo van</span> een <span class="hps">dynamische</span> <span class="hps">app</span> <span class="hps">zoekopdracht</span> af te <span class="hps">spelen</span></span></p> +</video> + +</pre> + +<pre class="brush: js">var v = document.querySelector('video'), + sources = v.querySelectorAll('source'), + lastsource = sources[sources.length-1]; +lastsource.addEventListener('error', function(ev) { + var d = document.createElement('div'); + d.innerHTML = v.innerHTML; + v.parentNode.replaceChild(d, v); +}, false); +</pre> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>De HTML elementen voor media: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Het manipuleren van video met beulp van canvas</a></li> + <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introductie van de Audio API Extension</a></li> + <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats die ondersteuend worden door de audio en video elementen</a></li> + <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> + <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> + <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, een JavaScript bibliotheek (mwEmbed) die een naadloze uitwijkmogelijkheid ondersteund voor HTML5, VLC Player, Java Cortado en OMTK Flash Vorbis player (wordt gebruikt door Wikimedia).</li> + <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, een Flash bibliotheek die een Vorbis decoder implementeert</li> + <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, een JavaScript wrapper voor audio- and video-tags met flash fallback, open source, GPL</li> + <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, een audio/video playback oplossing in Java die wordt onderhouden door Xiph.org</li> + <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, een open source HTML5 video player en framework.</li> + <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework met een aangepaste Flash shim API die HTML5 media nabootst tbv oudere browsers.</li> + <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> + <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - tbv HTML5 video</li> + <li><a href="http://jPlayer.org">jPlayer</a> een open source audio en video libray voor jQuery enZepto</li> +</ul> diff --git a/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 61f3e48bcf..db710ceb48 100644 --- a/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html +++ b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -1,7 +1,8 @@ --- title: Documenten manipuleren -slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +original_slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten --- <div>{{LearnSidebar}}</div> |