From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/nl/web/css/@namespace/index.html | 136 - files/nl/web/css/_colon_only-of-type/index.html | 101 - files/nl/web/css/_colon_required/index.html | 110 - files/nl/web/css/animation-duration/index.html | 131 - .../web/css/animation-iteration-count/index.html | 127 - files/nl/web/css/box-sizing/index.html | 145 - files/nl/web/css/css_color/index.html | 121 - .../css/css_colors/color_picker_tool/index.html | 3221 -------------------- .../nl/web/css/css_flexible_box_layout/index.html | 118 - files/nl/web/css/css_images/index.html | 152 - files/nl/web/css/css_positioning/index.html | 63 - .../understanding_z_index/index.html | 51 - .../the_stacking_context/index.html | 240 -- files/nl/web/css/cursor/index.html | 332 -- files/nl/web/css/index.html | 65 - files/nl/web/css/padding-bottom/index.html | 101 - 16 files changed, 5214 deletions(-) delete mode 100644 files/nl/web/css/@namespace/index.html delete mode 100644 files/nl/web/css/_colon_only-of-type/index.html delete mode 100644 files/nl/web/css/_colon_required/index.html delete mode 100644 files/nl/web/css/animation-duration/index.html delete mode 100644 files/nl/web/css/animation-iteration-count/index.html delete mode 100644 files/nl/web/css/box-sizing/index.html delete mode 100644 files/nl/web/css/css_color/index.html delete mode 100644 files/nl/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/nl/web/css/css_flexible_box_layout/index.html delete mode 100644 files/nl/web/css/css_images/index.html delete mode 100644 files/nl/web/css/css_positioning/index.html delete mode 100644 files/nl/web/css/css_positioning/understanding_z_index/index.html delete mode 100644 files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/nl/web/css/cursor/index.html delete mode 100644 files/nl/web/css/index.html delete mode 100644 files/nl/web/css/padding-bottom/index.html (limited to 'files/nl/web/css') diff --git a/files/nl/web/css/@namespace/index.html b/files/nl/web/css/@namespace/index.html deleted file mode 100644 index 165221fb75..0000000000 --- a/files/nl/web/css/@namespace/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: '@namespace' -slug: Web/CSS/@namespace -tags: - - At-rule - - CSS - - Layout - - Reference - - Web -translation_of: Web/CSS/@namespace ---- -

{{CSSRef}}

- -

Samenvatting

- -

@namespace is een at-rule welke XML namespaces definieert zodat deze gebruikt kunnen worden in een CSS style sheet. De gedefinieerde namespaces kunnen gebruikt worden om de universal, type, en attribute selectors alleen elementen binnen de namespace te laten selecteren. De @namespace regel heeft in het algemeen alleen toegevoegde waarde wanneer deze toegepast wordt in documenten welke meerdere namespaces hebben—zoals HTML5 met inline SVG of MathML, of XML met meerdere gebruikte woordenlijsten.  

- -

Elke @namespace regel moet alle @charset en @import regels volgen, en moet vóór alle andere at-rules en style declarations staan in een style sheet.

- -

@namespace kan gebruikt worden om de standaard namespace vast te leggen voor een style sheet. Wanneer een standaard namespace is vastgelegd, gelden alle universele en type selectors (maar geen attribute selectors, zie de opmerking onderaan) alleen voor de elementen binnen de standaard namespace.

- -

De @namespace regel kan ook gebruikt worden om een namespace prefix vast te leggen. Wanneer een universele, type of attribute selector wordt voorafgegaan met een namespace, dan geldt deze selector alleen wanneer de namespaceen de naam van het element of attribute matchen.

- -

In HTML5 worden namespaces automatisch toegepast op bekende foreign elements. Dit zorgt ervoor dat HTML elementen zich gedragen alsof ze in de XHTML namespace zijn (http://www.w3.org/1999/xhtml), zelfs als er geen xmlns attribuut in het document staat, en de<svg> en <math> elementen worden toegewezen aan hun bijbehorende namespaces (http://www.w3.org/2000/svg en http://www.w3.org/1998/Math/MathML).

- -
-

Note: In XML heeft een attribuut geen namespace, behalve als er een prefix op een attribuut is vastgelegd (bijv., xlink:href). In andere woorden, attributen nemen de namespace van het element waarop ze staan niet over. Om dit gedrag na te bootsen geldt de standaard namespace in CSS niet voor attribuut selectors.

-
- -

Syntaxis

- -
/* Standaard namespace */
-@namespace url(XML-namespace-URL);
-@namespace "XML-namespace-URL";
-
-/* Prefixed namespace */
-@namespace prefix url(XML-namespace-URL);
-@namespace prefix "XML-namespace-URL";
- -

Formele syntaxis

- -{{csssyntax}} - -

Voorbeelden

- -
@namespace url(http://www.w3.org/1999/xhtml);
-@namespace svg url(http://www.w3.org/2000/svg);
-
-/* Dit selecteert alle XHTML <a> elementen, omdat XHTML de standaard non-prefixed namespace is */
-a {}
-
-/* Dit selecteert alle SVG <a> elementen */
-svg|a {}
-
-/* Dit selecteert zowel XHTML als SVG <a> elementen */
-*|a {}
-
- -

Specificaties

- - - - - - - - - - - - - - - - -
SpecificatieStatusOpmerking
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Eerste definitie
- -

Browser compatibiliteit

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.01.0
Namespace selector (|){{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.03.0
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
diff --git a/files/nl/web/css/_colon_only-of-type/index.html b/files/nl/web/css/_colon_only-of-type/index.html deleted file mode 100644 index 3c65dd794f..0000000000 --- a/files/nl/web/css/_colon_only-of-type/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ':only-of-type' -slug: 'Web/CSS/:only-of-type' -tags: - - CSS - - CSS Pseudo-class - - Layout - - Reference - - Web -translation_of: 'Web/CSS/:only-of-type' ---- -
{{CSSRef}}
- -

Beschrijving

- -

De :only-of-type CSS pseudo-class representeerd elk element dat geen elementen heeft van hetzelfde type op hetzelfde niveau.

- -

Syntax

- -
element:only-of-type { style properties }
-
- -

Specificaties

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}Geen verandering.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Initiële definitie.
- -

Browser compatibiliteit

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("1.9.1")}}9.010.03.2
-
- -

Bekijk ook

- - diff --git a/files/nl/web/css/_colon_required/index.html b/files/nl/web/css/_colon_required/index.html deleted file mode 100644 index 502554a662..0000000000 --- a/files/nl/web/css/_colon_required/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ':required' -slug: 'Web/CSS/:required' -translation_of: 'Web/CSS/:required' ---- -

{{ CSSRef() }}

- -

Summary

- -

De :required CSS pseudo-class staat voor elk {{ HTMLElement("input") }} element waar de  {{ htmlattrxref("required", "input") }} attribute op staat. Dit stelt formulieren in staat om gemakkelijk aan te tonen welke velden geldige data hebben voordat een formulier verzonden kan worden.

- -

De {{ cssxref(":optional") }} pseudo-class kan gebruikt worden voor uiterlijk van optionele formulier velden.

- -

Syntax

- -{{csssyntax}} - -

Voorbeeld

- -

Bekijk {{ cssxref(":invalid") }} voor een voorbeeld.

- -

Specificaties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificatieStatuscommentaat
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Geen verandering.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Staat voor de semantiek van HTML en validatie.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Geen verandering.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Staat voor de pseudo-class, maar niet voor de geassocieerde semantiek.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support10.0{{ CompatGeckoDesktop("2") }}1010.05.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
-
- -

Bekijk ook

- - diff --git a/files/nl/web/css/animation-duration/index.html b/files/nl/web/css/animation-duration/index.html deleted file mode 100644 index 012ba19b76..0000000000 --- a/files/nl/web/css/animation-duration/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: animation-duration -slug: Web/CSS/animation-duration -tags: - - CSS - - CSS Animaties - - CSS Eigenschap - - Experimenteel - - Referentie -translation_of: Web/CSS/animation-duration ---- -
{{CSSRef}} {{ SeeCompatTable() }}
- -

Samenvatting

- -

De animation-duration CSS-eigenschap specificeert hoelang één cyclus duurt in een animatie.

- -

Een waarde van 0s, wat de standaardwaarde is, geeft aan dat er geen animatie moet plaatsvinden.

- -

Het is vaak handig om de eigenschap {{ cssxref("animation") }} te gebruiken om alle animatie-eigenschappen in een keer in te stellen.

- -

{{cssinfo}}

- -

Syntaxis

- -
animation-duration: 6s;
-animation-duration: 120ms;
-animation-duration: 1s, 15s;
-animation-duration: 10s, 30s, 230ms;
-
- -

Waardes

- -
-
<time>
-
De tijdsduur om één cyclus te voltooien voor een animatie. Dit mag gespecificeerd worden in seconden (door s als eenheid te geven) of in milliseconden (door ms als eenheid te geven). Als je de eenheid niet specificeert, dan is de definiëring ongeldig.
-
- -
Opmerking: Negatieve waardes zijn ongeldig en zullen ervoor zorgen dat de definiëring genegeerd wordt. Sommige oude implementaties, met een voorvoegsel, kunnen hetzelfde worden beschouwd als 0s.
- -

Formele syntaxis

- -{{csssyntax}} - -

Voorbeelden

- -

Zie CSS animations voor voorbeelden.

- -

Specificaties

- - - - - - - - - - - - - - - - -
SpecificatieStatusOpmerking
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}Initial definition
- -

Browser compatibiliteit

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
KenmerkChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basisondersteuning3.0{{ property_prefix("-webkit") }}
- {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
- {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
- 12.10		4.0{{ property_prefix("-webkit") }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
KenmerkAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basisondersteuning2.0{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
- {{ CompatGeckoMobile("16.0") }}		{{ CompatNo() }}{{ CompatNo() }}4.2{{ property_prefix("-webkit") }}{{CompatChrome(43.0)}}
-
- -

Zie ook:

- - diff --git a/files/nl/web/css/animation-iteration-count/index.html b/files/nl/web/css/animation-iteration-count/index.html deleted file mode 100644 index 79554f556a..0000000000 --- a/files/nl/web/css/animation-iteration-count/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: animation-iteration-count -slug: Web/CSS/animation-iteration-count -tags: - - animatie -translation_of: Web/CSS/animation-iteration-count ---- -
{{CSSRef}} {{ SeeCompatTable() }}
- -

Summary

- -

Met de animation-iteration-count CSS property beschrijf je het aantal keren dat een animatie speelt totdat de animatie stopt.

- -

Je kunt ook  de shorthand property te gebruiken om alle animatie-eigenschappen meteen in één regel in te stellen.

- -

{{cssinfo}}

- -

Syntax

- -
animation-iteration-count: infinite;
-animation-iteration-count: 3;
-animation-iteration-count: 2.3;
-
-animation-iteration-count: 2, 0, infinite;
-
- -

Values

- -
-
infinite
-
The animatie herhaalt zich non-stop.
-
<number>
-
Hoeveel keer een animatie zich herhaalt; 1 keer is default. Negatieve waarden zijn ongeldig. Je mag ook non-integer waarden declareren om een deel van de animatie af te spelen (bijvoorbeeld 0.5 zal de helft van de animatie-cyclus afspelen).
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

ZIe CSS animations voor voorbeelden.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
- {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
- {{ CompatGeckoDesktop("16.0") }}		10 12 {{ property_prefix("-o") }}
- 12.10		4.0{{ property_prefix("-webkit") }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
- {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(43.0)}}
-  
-
- -

See also

- - diff --git a/files/nl/web/css/box-sizing/index.html b/files/nl/web/css/box-sizing/index.html deleted file mode 100644 index 0ca846a303..0000000000 --- a/files/nl/web/css/box-sizing/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: box-sizing -slug: Web/CSS/box-sizing -tags: - - CSS - - CSS Attribuut - - Referenctie -translation_of: Web/CSS/box-sizing ---- -
 
- -

Overzicht

- -

Het box-sizing attribuut wordt gebruikt om het standaard CSS box model aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.

- -

{{cssinfo}}

- -

Syntax

- -
/* Keyword waarden */
-box-sizing: content-box;
-box-sizing: border-box;
-
-/* Globale waarden */
-box-sizing: inherit;
-box-sizing: initial;
-box-sizing: unset;
-
- -

Waarden

- -
-
content-box
-
Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. De {{Cssxref("width")}} en {{Cssxref("height")}} attributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld: .box {width: 350px;} Daarna voeg  je {border: 10px solid black;} toe. Resultaat: (in browser) .box {width:370px;}
-
- Kort samengevat worden de afmetingen van een element berekent als volgt: width = breedte van de content en height = hoogte van de content, exclusief borders of paddings.
-
- -
-
border-box
-
De {{Cssxref("width")}} en {{Cssxref("height")}} waarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld: .box {width: 350px; border: 10px solid black;} resulteert in een gerenderd element met width: 350px. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van border-box een element de doen verdwijnen.
-
De afmetingen worden berekend als volgt: width = border + padding + breedte van de inhoud en height = border + padding + hoogte van de inhoud.
-
- -

Formele syntax

- -{{csssyntax}} - -

Examples

- -
.example {
-  box-sizing: border-box;
-}
- -

Specificaties

- - - - - - - - - - - - - - - - -
SpecificatieStatusOpmerking
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Initiele definitie
- -

Browser compatibiliteit

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Standaard ondersteuning1.0 {{property_prefix("-webkit")}}[1]
- 10.0		12.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("29.0")}}		 -

8.0[1]

- 		7.03.0 (522){{property_prefix("-webkit")}}
- 5.1[2]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Standaard ondersteuning2.1{{property_prefix("-webkit")}}[1]
- 4.0		{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}} [1]
- {{CompatGeckoMobile("29.0")}}		9.0 -

7.0 {{property_prefix("-webkit")}}
- 10.0

- 		3.2 {{property_prefix("-webkit")}}
- 4.0
-
- -

[1] box-sizing wordt niet gerespecteerd als de hoogte wordt berekend door {{domxref("window.getComputedStyle()")}}, in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen currentStyle attribuut geeft niet de juiste waarde voor height terug.

- -

[2] De vendor prefix -webkit is verwijderd sinds 534.12.

- -

Zie ook

- - diff --git a/files/nl/web/css/css_color/index.html b/files/nl/web/css/css_color/index.html deleted file mode 100644 index 174edbd41e..0000000000 --- a/files/nl/web/css/css_color/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Color -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors -original_slug: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

CSS Colors is a module of CSS that deals with colors, color types and transparency.

- -

Reference

- -

Properties

- -
- -
- -

CSS Data Types

- -

{{cssxref("<color>")}}

- -

Guides

- -

None.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

See also

- - diff --git a/files/nl/web/css/css_colors/color_picker_tool/index.html b/files/nl/web/css/css_colors/color_picker_tool/index.html deleted file mode 100644 index 5c9074eeec..0000000000 --- a/files/nl/web/css/css_colors/color_picker_tool/index.html +++ /dev/null @@ -1,3221 +0,0 @@ ---- -title: Kleurenkiezer-hulpprogramma -slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - Hulpmiddelen - - Tools -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- - - -

{{CSSRef}}

- -

Dit hulpmiddel maakt het makkelijk om zelfgekozen kleuren voor het web te maken, aan te passen en hiermee te experimenteren. Ook kunt u hiermee makkelijk naar verschillende soorten kleurindelingen converteren die door CSS worden ondersteund, waaronder HEXA-kleuren, RGB (Rood/Groen/Blauw) en HSL (Hue/Saturation/Lightness - Tint/Verzadiging/Helderheid). Beheer over het alpha-kanaal wordt ook ondersteund op de indelingen RGB (rgba) en HSL (hsla).

- -

Elke kleur wordt tijdens het aanpassen in alle drie de standaard CSS-indelingen voor het web aangeboden. Daarnaast wordt, gebaseerd op de huidige geselecteerde kleur, zowel een palet voor HSL en HSV als voor alpha gegenereerd. Het kleurenkiezerveld in ‘eyedropper’-stijl kan tussen HSL- en HSV-indeling worden omgeschakeld.

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

diff --git a/files/nl/web/css/css_flexible_box_layout/index.html b/files/nl/web/css/css_flexible_box_layout/index.html deleted file mode 100644 index 879bb404f6..0000000000 --- a/files/nl/web/css/css_flexible_box_layout/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CSS Flexible Box Layout -slug: Web/CSS/CSS_Flexible_Box_Layout -tags: - - CSS - - CSS Flexible Box Layout - - Overzicht - - Referentie -translation_of: Web/CSS/CSS_Flexible_Box_Layout ---- -
{{CSSRef}}
- -

CSS Flexible Box Layout is een CSS module die het box model van CSS verder optimaliseert. Flexbox is geoptimaliseerd voor user interface design en de lay-out van items. Onderliggende items van een flex container kunnen in elke richting worden geplaatst op een as. Afmetingen van items in een flex container zijn flexibel. Zo kunnen afmetingen groeien om de ongebruikte ruimte te vullen, of kunnen ze krimpen om binnen de grenzen van het ouder element te passen.

- -

-

Basis voorbeeld

- - -

In het voorbeeld hieronder is een container ingesteld als display: flex waardoor de drie onderliggende elementen "flex elementen" worden. De waarde van justify-content is ingesteld op space-between om de items gelijkmatig op de hoofdas te plaatsen. Tussen elk item wordt een gelijke hoeveelheid ruimte geplaatst, waarbij de linker- en rechterartikelen gelijk liggen met de randen van de flex container. Op de dwarsas zijn de items uitgetrokken (stretched) tot gelijke hoogte. Dit komt omdat de default waarde voor align-items stretch is. De items strekken zich uit tot de hoogte van de flex container, waardoor ze elk even lang lijken als het langste item.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

- -

Referentie

- -

CSS Eigenschappen

- -
- -
- -

Alignment Eigenschappen

- -

De eigenschappen align-content, align-self, align-items en justify-content waren aanvankelijk onderdeel van de Flexbox-specificatie, maar worden nu gedefinieerd in Box Alignment-specificatie. De Flexbox-specificatie verwijst nu naar de Box Alignment-specificatie voor up-to-date definities. Alsook extra Alignment eigenschappen worden nu gedefinieerd in de Box Alignment-specificatie.

- -
- -
- -

Woordenlijst resultaten

- -
- -
- -

Gidsen

- -
-
Basisconcepten van Flexbox
-
Een overzicht van de eigenschappen van flexbox
-
Verhouding Flexbox tot andere layout methodes
-
Hoe flexbox zich verhoudt tot andere layout methodes, en tot andere CSS-specificaties
-
Items uitlijnen in een flex container
-
Hoe de Box Alignment-eigenschappen werken met flexbox.
-
Flex items ordenen
-
Hoe de volgorde en de richting van items te wijzigen, inclusief geldende aandachtspunten hierbij
-
Ratios van flex items langs de hoofdas beheren
-
Beschrijving van de eigenschappen flex-grow, flex-shrink en flex-basis.
-
Wrapping van flex items
-
Hoe flex containers creëren met meerdere lijnen, en de de weergave van de items in die lijnen instellen.
-
Typische Flexbox use cases
-
Design pattersn voor typische use cases
-
Achterwaartse compatibilteit van Flexbox
-
Browser status van flexbox, interoperabiliteit en ondersteuning van oudere browsers, en een overzicht van de versies van de specificatie
-
- -

Specificaties

- - - - - - - - - - - - - - - - -
SpecificatieStatusOpmerking
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
- -

Zie ook

- -
-
Flexbugs
-
een door de community samengestelde lijst met Flexbox gerelateerde browser bugs en workarounds
-
Cross-browser Flexbox mixins
-
Een verzameling mixins om crossbrowser Flexbox functionaliteiten te voorzien in oudere browsers die de moderne Flexbox syntax niet ondersteunen
-
diff --git a/files/nl/web/css/css_images/index.html b/files/nl/web/css/css_images/index.html deleted file mode 100644 index f6fb2c9289..0000000000 --- a/files/nl/web/css/css_images/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: CSS Images -slug: Web/CSS/CSS_Images -tags: - - CSS - - CSS Images - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Images ---- -
{{CSSRef}}
- -

CSS Images is a module of CSS that defines what types of images can be used (the {{cssxref("<image>")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

- -

Reference

- -

Properties

- -
- -
- -

Functions

- -
- -
- -

Data types

- -
- -
- -

Guides

- -
-
Using CSS gradients
-
Presents a specific type of CSS images, gradients, and how to create and use these.
-
Implementing image sprites in CSS
-
Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}} 
{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}{{Spec2('Compat')}}Standardizes the -webkit prefixed gradient value functions
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}} 
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/nl/web/css/css_positioning/index.html b/files/nl/web/css/css_positioning/index.html deleted file mode 100644 index 61afa2e242..0000000000 --- a/files/nl/web/css/css_positioning/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: CSS Positioned Layout -slug: Web/CSS/CSS_Positioning -tags: - - CSS - - CSS Positioning - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Positioning ---- -
{{CSSRef}}
- -

CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

- -

Reference

- -

CSS properties

- -
- -
- -

Guides

- -
-
Understanding CSS z-index
-
Presents the notion of stacking context and explains how z-ordering works, with several examples.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/index.html b/files/nl/web/css/css_positioning/understanding_z_index/index.html deleted file mode 100644 index 554652f1b8..0000000000 --- a/files/nl/web/css/css_positioning/understanding_z_index/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Understanding CSS z-index -slug: Web/CSS/CSS_Positioning/Understanding_z_index -tags: - - Advanced - - CSS - - Guide - - NeedsTranslation - - Reference - - TopicStub - - Understanding_CSS_z-index - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -
{{cssref}}
- -

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

- -
-

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

-
- -

(from CSS 2.1 Section 9.9.1 - Layered presentation)

- -

This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

- -

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

- -

This article will try to explain those rules, with some simplification and several examples.

- -
    -
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. -
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. -
  3. Using z-index: How to use z-index to change default stacking.
    4. -
  4. The stacking context: Notes on the stacking context.
    5. -
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. -
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. -
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. -
- -
-

Original Document Information

- - - -

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

-
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html deleted file mode 100644 index 923f5121b4..0000000000 --- a/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Het stapelverband -slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -tags: - - CSS - - Geavanceerd - - Gids - - Referentie - - Stapelverband - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -original_slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext ---- -
{{cssref}}
- -

Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.

- -

Het stapelverband

- -

In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.

- -

Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:

- - - -

Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.

- -

Samengevat:

- - - -
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.
- -

Het voorbeeld

- -

Example of stacking rules modified using z-index

- -

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position en z-index waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:

- - - -

Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>.

- -
-

Notes:

- - -
- -

Voorbeeld

- -

HTML

- -
<div id="div1">
-  <h1>Division Element #1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
-</div>
-
-<div id="div2">
-  <h1>Division Element #2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
-</div>
-
-<div id="div3">
-  <div id="div4">
-    <h1>Division Element #4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
-  </div>
-
-  <h1>Division Element #3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
-
-  <div id="div5">
-    <h1>Division Element #5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
-  </div>
-
-  <div id="div6">
-    <h1>Division Element #6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
-  </div>
-</div>
-
- -

CSS

- -
* {
-  margin: 0;
-}
-html {
-  padding: 20px;
-  font: 12px/20px Arial, sans-serif;
-}
-div {
-  opacity: 0.7;
-  position: relative;
-}
-h1 {
-  font: inherit;
-  font-weight: bold;
-}
-#div1,
-#div2 {
-  border: 1px dashed #696;
-  padding: 10px;
-  background-color: #cfc;
-}
-#div1 {
-  z-index: 5;
-  margin-bottom: 190px;
-}
-#div2 {
-  z-index: 2;
-}
-#div3 {
-  z-index: 4;
-  opacity: 1;
-  position: absolute;
-  top: 40px;
-  left: 180px;
-  width: 330px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-  padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-  border: 1px dashed #996;
-  background-color: #ffc;
-}
-#div4 {
-  z-index: 6;
-  margin-bottom: 15px;
-  padding: 25px 10px 5px;
-}
-#div5 {
-  z-index: 1;
-  margin-top: 15px;
-  padding: 5px 10px;
-}
-#div6 {
-  z-index: 3;
-  position: absolute;
-  top: 20px;
-  left: 180px;
-  width: 150px;
-  height: 125px;
-  border: 1px dashed #009;
-  padding-top: 125px;
-  background-color: #ddf;
-  text-align: center;
-}
- -

Resultaat

- -

{{ EmbedLiveSample('Example', '100%', '396') }}

- -

Zie ook

- - - -
-

Original Document Information

- - -
diff --git a/files/nl/web/css/cursor/index.html b/files/nl/web/css/cursor/index.html deleted file mode 100644 index da2aa4c9d4..0000000000 --- a/files/nl/web/css/cursor/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: cursor -slug: Web/CSS/cursor -tags: - - CSS - - CSS eigenschappen - - Cursor - - Custom Cursor - - Reference - - UI - - mouse - - pijl - - pointer -translation_of: Web/CSS/cursor ---- -
{{CSSRef}}
- -

het CSS-eigenschap cursor geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.

- -
{{EmbedInteractiveExample("pages/css/cursor.html")}}
- - - -

Syntax

- -
/* Keyword value */
-cursor: pointer;
-cursor: auto;
-
-/* URL, with a keyword fallback */
-cursor: url(hand.cur), pointer;
-
-/* URL and coordinates, with a keyword fallback */
-cursor: url(cursor1.png) 4 12, auto;
-cursor: url(cursor2.png) 2 2, pointer;
-
-/* Global values */
-cursor: inherit;
-cursor: initial;
-cursor: unset;
-
- -

De eigenschap cursor wordt opgegeven als geen of meer <url> waarden, gescheiden door komma's, gevolgd door één verplichte zoekwoordwaarde. Elke <url> zou naar een afbeeldingsbestand moeten wijzen. De browser probeert de eerste opgegeven afbeelding te laden, terug te vallen naar de volgende als dit niet kan, en terug te vallen naar de sleutelwoordwaarde als er geen afbeeldingen kunnen worden geladen (of als geen enkele waarde is opgegeven).

- -

Elke <url> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten  <x><y> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.

- -

Bijvoorbeeld , dit specifeerd twee afbeeldingen die gebruikmaken van <url> waarden, voorzien van <x><y> coördinaten voor de tweede en terugvallen op de progress sleutelwoordwaarde als geen van beide afbeeldingen kunnen worden geladen:

- -
cursor: url(one.svg), url(two.svg) 5 5, progress;
- -

Values

- -
-
<url>
-
Een url(…) of een door komma's gescheiden lijst url(…), url(…), …, wijzend naar een afbeeldingsbestand. Meer dan één {{cssxref ("<url>")}} kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) moet aan het einde van de fallback-lijst staan. Zie URL-waarden gebruiken voor de cursoreigenschapsing voor meer informatie.
-
<x> <y> {{experimental_inline}}
-
Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.
-
Keyword values
-
-

Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CategorieCSS valueActualDescription
AlgemeenautoDe browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, text bij zwevende tekst.
defaultdefault.gifDe platform afhankelijke basis cursor. Het is meestal een pijl.
noneEr wordt geen cursor weergegeven.
Links & statuscontext-menucontext-menu.pngEen contextmenu is beschikbaar.
helphelp.gifHelp-informatie is beschikbaar.
pointerpointer.gifHet element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.
progressprogress.gifHet programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met wait).
waitwait.gifHet programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met progress). Is soms een afbeelding van een zandloper of van een horloge.
Selectioncellcell.gif -

De tabel cel kan geslecteerd worden.

-
crosshaircrosshair.gif -

Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.

-
texttext.gifDe tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.
vertical-textvertical-text.gifDe verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.
Drag & dropaliasalias.gifEen alias of shortcut wordt gecreëerd.
copycopy.gifIets kan worden gekopieerd.
movemove.gifIets kan worden verplaatst.
no-dropno-drop.gifEen item mag niet op de huidige locatie worden geplaatst.
- {{bug("275173")}}: Op Windows en Mac OS X, no-drop is hetzelfde als not-allowed.
not-allowednot-allowed.gifIets kan niet worden gedaan.
Resize & scrollingall-scrollall-scroll.gifIets kan gescrold worden in elke richting (pannend).
- {{bug("275174")}}: Op Windows, all-scroll is hetzelfde als move.
col-resizecol-resize.gifDe item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.
row-resizerow-resize.gifDe item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.
n-resizeExample of a resize towards the top cursor -

Een rand kan bewogen worden. Bijvoorbeeld de  se-resize cursor wordt gebruikt waneer een beweging start van de zuid-oost hoek van een box.

- -

In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, n-resize ens-resize zijn hetzelfde als ns-resize.

-
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifBi-directioneel resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif -

Iets kan worden in- of uitvergroot.

-
zoom-outzoom-out.gif
Grabgrabgrab.gif -

Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)

-
grabbinggrabbing.gif
-
-
- -

Formal syntax

- -{{csssyntax}} - -

Usage notes

- -

Hoewel de specificaties geen grootte limitaties defineerd voor cursor, kunnen individuele{{Glossary("user agent", "user agents")}} kiezen dit wel te doen. Cursor aanpassingen die gebruik maken van afbeeldingen die groter zijn dan de size range gesuporteerd door de browser worden in het algemeen genegeerd.

- -

Controleer de {{anch("Browser compatibility")}} tabel voor notities i.v.m. cursor grootte limieten.

- -

Examples

- -
.foo {
-  cursor: crosshair;
-}
-
-.bar {
-  cursor: zoom-in;
-}
-
-/* A fallback keyword value is required when using a URL */
-.baz {
-  cursor: url("hyper.cur"), auto;
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Initiële definitie.
- -

{{cssinfo}}

- -

Browser compatibility

- - - - - -

{{Compat("css.properties.cursor")}}

- - - -

See also

- - diff --git a/files/nl/web/css/index.html b/files/nl/web/css/index.html deleted file mode 100644 index 1e924e4470..0000000000 --- a/files/nl/web/css/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: CSS -slug: Web/CSS -tags: - - CSS - - Design - - Layout - - Ontwerp - - Referentie - - Verdeling -translation_of: Web/CSS ---- -

CSS is één van de basistalen van het open web en heeft een gestandaardiseerde W3C-specificatie. De taal is ontwikkeld in niveau's; CSS1 is nu verouderd, CSS2.1 is een aanbeveling en CSS3, nu opgesplitst in kleinere modules, is op weg naar de standaard.

- -
- - -
- - -
-

Documentatie en tutorials

- -
-
CSS sleutelbegrippen
-
Beschrijft de syntax en vormt de taal en introduceert grondbeginselen zoals specificity en inheritance, het box model en margin collapsing, stacking en block-formatting contexten, of de initiële, berekende, gebruikte en actuele waarden. Entiteiten zoals CSS shorthand properties zijn ook beschreven.
-
CSS developer gids
-
Artikelen die je helpen met alles leren over CSS. Van de basis van het stijlen van HTML met CSS tot verschillende CSS-technieken die je inhoud gaan doen sprankelen.
-
Vaakgestelde CSS vragen
-
Antwoorden op vaakgestelde CSS vragen.
-
-
- -
-

Hulpmiddelen voor CSS-ontwikkeling

- -
    -
  • De W3C CSS Validatie Service kijkt of een gegeven CSS correct is. De service OnlineWebCheck.com doet hetzelfde. Beide zijn onschatbare hulpmiddelen.
    • -
  • Firefox Developer Tools staat je toe om live de CSS van de webpagina te bekijken en aan te passen via de Inspector en de Style Editor tools.
    • -
  • Firebug extensie voor Firefox, een populaire extensie staat je toe om live CSS aan te passen op bekeken websites. Dit is ideaal om aanpassingen te testen, al kan deze tool veel meer dan dat.
    • -
  • Web Developer extensie voor Firefox staat je ook toe om live CSS te bekijken en aan te passen op bekeken websites. Gemakkelijker dan Firebug, maar ook minder krachtig.
    • -
  • CSS tools.
    • -
-
-
-
- -

Zie ook

- - diff --git a/files/nl/web/css/padding-bottom/index.html b/files/nl/web/css/padding-bottom/index.html deleted file mode 100644 index c3525392d8..0000000000 --- a/files/nl/web/css/padding-bottom/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: padding-bottom -slug: Web/CSS/padding-bottom -tags: - - CSS - - CSS Padding - - CSS Property - - Reference -translation_of: Web/CSS/padding-bottom ---- -
{{CSSRef}}
- -

De  CSS-eigenschap padding-bottom stelt de hoogte in van de vulling aan de onderkant van een element. Voor padding is het, in tegenstelling tot margins, niet toegestaan om negatieve waarden te gebruiken. De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen.

- -
/* <length> values */
-padding-bottom: 0.5em;
-padding-bottom: 0;
-padding-bottom: 2cm;
-
-/* <percentage> value */
-padding-bottom: 10%;
-
-/* Global values */
-padding-bottom: inherit;
-padding-bottom: initial;
-padding-bottom: unset;
-
- -

De paddingruimte is de ruimte tussen de inhoud en de rand van een element.

- -

The effect of the CSS padding-bottom property on the element box

- -

{{cssinfo}}

- -

Syntaxis

- -

Waarden

- -
-
{{cssxref("length")}}
-
De grootte van de padding als vaste waarde. Mag niet negatief zijn.
-
{{cssxref("percentage")}}
-
De grootte van de padding als een percentage, relatief aan de breedte van het element waarin het betreffende element staat. Mag niet negatief zijn.
-
- -

Formele syntaxis

- -{{csssyntax}} - -

Voorbeelden

- -
.content { padding-bottom: 5%; }
-.sidebox { padding-bottom: 10px; }
-
- -

Specificaties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificatieStatusOpmerking
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}Geen verandering ten opzichte van {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Definieert padding-bottom als animeerbaar.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}Geen verandering ten opzichte van {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Aanvankelijke definitie.
- -

Browsercompatibiliteit

- - - -

{{Compat("css.properties.padding-bottom")}}

- -

Zie ook

- - -- cgit v1.2.3-54-g00ecf