From b8ff30e91a9ab7e5e9d7eec9519c2b9df0cb875a Mon Sep 17 00:00:00 2001 From: tevin <32573219+tb619tev@users.noreply.github.com> Date: Fri, 2 Feb 2018 13:01:57 +0000 Subject: [PATCH 1/2] Transaled in Dutch the folder that i added is a translated version of the CSS tips from english to dutch --- .DS_Store | Bin 0 -> 6148 bytes translations/.DS_Store | Bin 0 -> 10244 bytes translations/du-NL/Readme.md | 307 +++++++++++++++++++++++++++++++++++ 3 files changed, 307 insertions(+) create mode 100644 .DS_Store create mode 100644 translations/.DS_Store create mode 100644 translations/du-NL/Readme.md diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..284c12d478374842932bb38803701fa0585c98bf GIT binary patch literal 6148 zcmeHKPfrs;6n_I%w*_SRQy}VLV`E}M50HX*F)jt8jRzW*AOx`NwnN#t-Ko1FyGqVE#B;Tma0_XssVdI!c zVfP#1e%^YdPg(jAi5MdU4{V6Q1=bTC8)61x2L3e$_}U%B6&v8X_2K0D#V4m3)*X*I z81uoYdu|xb%zPq!{fP?~FKJpzOAV!VtbNwBB0Fk?c{|wRPenW0ca*-ynDMVTE0Ijmnt?yX6B_FnQZ8__MBeOHQT+ z28S*W>m#FMBjY3Kbb4YkJvDmeYDph+?DCUpz+Zlec`V3#4O-HNL!_fnW_~fC2Uz+> zM4v^LdxWmhUlLYn33Ff2$g}m6g4{kVYGPhH}6>ugF3-a+$w* z!n?UGW{+sC;O{Y<# zz^dD2*RN*oewC~yGv-aH>5%CXt?6XVw`&xgMQO{J50z7cX;=gcw&5vs;3d3)ckmuQ z!WZ}k-^mb}AlJz>$&z`pKuoeomdFEAAgeOFuls4Qb*GX@wh+(!v<*gCKiR{+EWnuVaw?-D%6P-rUbNJI|` zk*SC>m8dHQk?CkRRGg`>BT=RUQI`**W+v)}Ld5Jiz9GVam=fbYW*}zZGz0wKA4TWq z|Gl&C{~{>vVg_Oc{!a!-V%b{GV{Phe?WvNVwFb6bY+QI;N1{l_|ilO8g@rXo$O*fxpVY5AJ8xS^xk5 literal 0 HcmV?d00001 diff --git a/translations/.DS_Store b/translations/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d87072d53674f7b4af06d3773c86618f23c5220c GIT binary patch literal 10244 zcmeHMOK;Oa5T5M=oIa@ArVjxJiwFs+MM{;HazUhN5mX==#icZAOY6jLYTC3#WNQ8S?<{qlK6Zu_lna;+i6RAfYP>Qw$>9 zQLiy`#AJvyfx;b#a0e3ZOu`I>@ZHf*<2;6UELQhDoT&i)8Dh9@6bIxFoLq5GQ2hRD{TZjxlmrF)M>~@ZpF6tHr41n zbpyk8Ess0friCW!Pi@zvdnsCWO`or$3x%RYl*pz!Ua2G!Gm~0k`gV0vtIW>EC$;Is zt!g!*j9s6)v$$0}IIO&^zIr2~BH^0>23n##IvJv!-wjI?BjEs(rj1OJDvZ)T|jQsP0$1ZoCI@C)!WouI%@R5MUJayBawTr>72G)L{ z+lQzcYH`R|=Ck9e<%1I1M2{!>5Q2m1!{-OFj&h3QWKp=&%kipa!quExd;h@Cm-b z5BN#?$tbx-Cdee2A+sb&=EyvGKo&_xcz4uq=GFRE0?8U;(|L6YQ+l2jOHEcy+9F+8 zFv~$6;PcTyG`oM&w@A%Xw56TXR^HV;*P(6!S7cY(4J8Qh2}(hxsRDM!o}fmE@(KF? zpP<7T#;wg9u*VoQ#1x@DvfF+J|od5p

, et al. afzonderlijk. In plaats daarvan, toevoegen aan berichttekst: + +body { + line-height: 1.5; +} + +Deze manier tekstgedeelten kan overnemen van lichaam. + + + + +Niets Vertically-Center +Nee, het is niet zwart magic, kunt u echt centrum elementen verticaal: +html, body { + height: 100%; + margin: 0; +} + +body { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-flex; + display: flex; +} + +Wilt centrum iets anders? Verticaal, horizontaal...alles, altijd en overal? CSS-Tricks heeft een mooie write-up op te doen. +Opmerking: Let bij sommige buggy gedrag met flexbox in IE11. + +Kommagescheiden lijsten +maken lijstitems die eruit ziet als een echte, door komma's gescheiden lijst: +ul > li:not(:last-child)::after { + content: ","; +} + +Gebruik de :niet() pseudo-class dus geen komma wordt toegevoegd aan het laatste item. +Opmerking: Deze tip is misschien niet ideaal voor toegankelijkheid, specifiek screenreaders. En kopiëren/plakken vanuit de browser werkt niet met CSS gegenereerde content. Ga voorzichtig te werk. + +Items selecteren met negatieve nth-kind +Gebruik negatieve nth-kind in CSS items te selecteren 1 tot n. +li { + display: none; +} + +/* select items 1 through 3 and display them */ +li:nth-child(-n+3) { + display: block; +} +Of omdat u al hebt geleerd over het gebruik :niet(), probeer dan: +/* select all items except the first 3 and display them */ +li:not(:nth-child(-n+3)) { + display: none; +} + +Nou dat was vrij eenvoudig. + +Gebruik SVG voor pictogrammen +Er is geen enkele reden om geen gebruik te maken van SVG voor pictogrammen: +.logo { + background: url("logo.svg"); +} + +SVG weegschaal goed voor alle soorten resolutie en wordt ondersteund door alle browsers terug naar IE9. Zo sloot het .png-, .jpg- of .gif-jif-whatev bestanden. +Opmerking: Als u SVG icon-alleen knoppen voor slechtzienden gebruikers en de SVG niet wordt geladen, dit zal bijdragen tot het behoud van toegankelijkheid: +.no-svg .icon-only::after { + content: attr(aria-label); +} + +Gebruik de "Lobotomized Owl" Selector +misschien een vreemde naam maar met behulp van de universele selector (*) met het aangrenzende broertje selector ( ) een krachtige CSS-functionaliteit: +* + * { + margin-top: 1.5em; +} +In dit voorbeeld worden alle elementen in de flow van het document die volgen andere elementen ontvangt margin-top: 1.5em. +Voor meer informatie over de "lobotomized owl" selector, lees Heydon Pickering's post op een lijst. + +Gebruik max hoogte voor pure CSS Sliders +werktuig CSS-only sliders met max hoogte met overloop verborgen: +.slider { + max-height: 200px; + overflow-y: hidden; + width: 300px; +} + +.slider:hover { + max-height: 600px; + overflow-y: scroll; +} +Het element vormt de max-hoogtewaarde op hangen en de schuifbalk geeft als gevolg van de overloop. +Equal-Width Tabelcellen +tabellen kan een pijn te werken met dus probeer met behulp van het tabel-layout: vast om cellen op gelijke breedte: +.calendar { + table-layout: fixed; +} + +Pijn-vrij table layouts.: +Ontdoen van marge Hacks met Flexbox +bij het werken met kolom dakgoten kunt ontdoen van ne-, eerste- en laatste kind hacks via flexbox's space-tussen eigendom: +.list { + display: flex; + justify-content: space-between; +} + +.list .person { + flex-basis: 23%; +} +Nu kolom dakgoten verschijnen altijd gelijkmatig verdeelde. + +Gebruik attribuut Selectors met lege Links +links tonen wanneer de -element heeft geen tekst, maar het href attribuut heeft een link: +a[href^="http"]:empty::before { + content: attr(href); +} +Dat is best handig. +Stijl "Default" Links +Voeg een stijl voor "default" links: +a[href]:not([class]) { + color: #008000; + text-decoration: underline; +} +Nu links die ingevoegd via een CMS, dat meestal niet een klassekenmerk, zal een onderscheid zonder boodschap die de cascade. +Consistente verticaal ritme +Gebruik een universele selector (*) binnen een element om een consistent verticaal ritme: +.intro > * { + margin-bottom: 1.25rem; +} +Consistente verticaal ritme geeft een visuele esthetiek die content wordt veel beter leesbaar zijn. + +Intrinsieke verhouding dozen +een vak te maken met een intrinsieke verhouding, alles wat je hoeft te doen is van toepassing Top of Bottom padding aan een div: +.container { + height: 0; + padding-bottom: 20%; + position: relative; +} + +.container div { + border: 2px dashed #ddd; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +Met 20% voor vulling maakt de hoogte van het vak gelijk aan 20% van de breedte. Ongeacht de breedte van het weergavevenster kind div houdt zijn beeldverhouding (100%/20% = 5:1). + +Stijl gebroken beelden +gebroken beelden meer esthetisch aangenaam met een beetje CSS: +img { + display: block; + font-family: Helvetica, Arial, sans-serif; + font-weight: 300; + height: auto; + line-height: 2; + position: relative; + text-align: center; + width: 100%; +} +Voeg nu pseudo-elementen regels om een gebruiker bericht en URL referentie van het gebroken beeld: +img::before { + content: "We're sorry, the image below is broken :("; + display: block; + margin-bottom: 10px; +} + +img::after { + content: "(url: " attr(src) ")"; + display: block; + font-size: 12px; +} + +Gebruik rem voor wereldwijde omvang; Gebruik em voor lokale Sizing +na het instellen van de basis de lettergrootte op de hoofdpartitie (html { font-size: 100%; }); stel de lettergrootte voor tekstgedeelten em: +h2 { + font-size: 2em; +} + +p { + font-size: 1em; +} +Then set the font-size for modules to rem: +article { + font-size: 1.25rem; +} + +aside .module { + font-size: .9rem; +} +Now each module becomes compartmentalized and easier to style, more maintainable, and flexible. +Verberg Autoplay filmpjes die niet gedempt +is dit een geweldige truc voor een aangepaste user stylesheet. Voorkom overbelasting van een gebruiker met het geluid van een video die screenmodus afgespeeld wanneer de pagina geladen is. Als het geluid niet gedempt, don't show video: +video[autoplay]:not([muted]) { + display: none; +} +Nogmaals, we profiteren van de :niet() pseudo-class. + +Gebruik :wortel voor flexibele Type +het type font size in een responsieve lay-out moet kunnen aanpassen met elk deelvenster. U berekent de tekengrootte op basis van het deelvenster hoogte en breedte met :wortel: +:root { + font-size: calc(1vw + 1vh + .5vmin); +} +Nu kunt u gebruik maken van de wortel em eenheid gebaseerd op de waarde berekend door :wortel: +body { + font: 1rem/1.6 sans-serif; +} + +Set font-size op formulier elementen voor een betere mobiele ervaring +te vermijden mobiele browsers (iOS Safari, et al.) vanaf het inzoomen op een HTML formulier elementen als een vervolgkeuzelijst wordt aangetikt, font-size op de selectieschakelaar regel: + +te vermijden mobiele browsers (iOS Safari, et al.) vanaf het inzoomen op een HTML formulier elementen als een