diff --git a/.gitignore b/.gitignore index d07a3fa..8565a30 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ _site node_modules .ftppass +package-lock.json +.jekyll-cache diff --git a/README.textile b/README.textile index a7c8777..3ce6267 100644 --- a/README.textile +++ b/README.textile @@ -3,10 +3,16 @@ This is the source for "learnlayout.com":http://learnlayout.com in case you're c h2. How to Build * If needed, install "NPM":https://npmjs.org/ +** Last tested version was 6.14.4 * If needed, install "grunt":http://gruntjs.com @npm install -g grunt-cli@ +** Last tested grunt-cli version was 1.3.2 +** Last tested grunt version was 0.4.5 * If needed, do a @npm install@ * If needed, install jekyll @sudo gem install jekyll@ -* If needed, install "pygments":http://pygments.org/download/ (I have used `sudo easy_install pygments` on Mac) +** Last tested version was 4.1.1 +* If needed, install "pygments":http://pygments.org/download/ +** I most recently used `brew install pygments` on Mac +** Last tested version was 2.7.2 * Build + run test server with @grunt serve@ * or build only with @grunt@ @@ -18,4 +24,8 @@ If you're not familiar with YAML, it's a very simple human-readable data format. To contribute to a translation, start with "en.yaml":https://github.com/incompl/csslayoutsite/blob/master/translations/en.yaml and either "email me":mailto:gsmith@incompl.com translated YAML files or make pull requests against this repository if you know how. -To test a translation, change the @lang@ property in "_config.yml":https://github.com/incompl/csslayoutsite/blob/master/templates/_config.yml before you build. If you choose an RTL language you need to add the line @rtl: true@ to the config. +To test a translation, add a @lang@ parameter when using the @grunt@ commands described above. For example, @grunt serve --lang=es@ + +h2. License + +"Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)":https://creativecommons.org/licenses/by-nc/4.0/ diff --git a/_plugins/localize.rb b/_plugins/localize.rb index 408c5d8..f738599 100644 --- a/_plugins/localize.rb +++ b/_plugins/localize.rb @@ -37,7 +37,9 @@ def render(context) class RtlTag < Liquid::Tag def render(context) - rtl = context.registers[:site].config['rtl'] + @lang = context.registers[:site].config['lang'] + @translations = YAML::load(File.open("translations/#{@lang}.yaml")) + rtl = @translations['rtl'] if rtl == true "rtl" else diff --git a/deploy-all.sh b/deploy-all.sh index 82cea95..c27b9fe 100755 --- a/deploy-all.sh +++ b/deploy-all.sh @@ -12,4 +12,5 @@ grunt deploy --lang=pt-br grunt deploy --lang=pt-pt grunt deploy --lang=ru grunt deploy --lang=zh -grunt deploy --lang=zh-tw \ No newline at end of file +grunt deploy --lang=zh-tw +grunt deploy --lang=ar \ No newline at end of file diff --git a/package.json b/package.json index 50f2c33..a765171 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.1.0", "devDependencies": { "grunt": "~0.4.2", + "grunt-ftp-deploy": "^0.1.10", "grunt-jekyll": "~0.4.2" } } diff --git a/templates/_layouts/default.html b/templates/_layouts/default.html index 30d6cb4..2078593 100644 --- a/templates/_layouts/default.html +++ b/templates/_layouts/default.html @@ -2,11 +2,7 @@ - {% if page.title != nil %} - {% localize global.short_title %} - {% localize page.title %} - {% else %} - {% localize global.title %} - {% endif %} + {% localize global.title %} @@ -43,10 +39,6 @@
- {% if page.title %} -

{% localize page.title %}

- {% endif %} - {{ content }} {% if page.prev or page.next %} @@ -100,27 +92,6 @@

{% localize page.title %}

-
- Ads by Bocoup -
- - -
-
diff --git a/templates/about.html b/templates/about.html index a97ad53..ff94589 100644 --- a/templates/about.html +++ b/templates/about.html @@ -1,6 +1,5 @@ --- layout: default -title: about.title noFooter: true --- @@ -22,6 +21,10 @@ } +

+ {% localize about.title %} +

+
Greg Smith diff --git a/templates/box-model.html b/templates/box-model.html index 10ba194..a8d692c 100644 --- a/templates/box-model.html +++ b/templates/box-model.html @@ -1,6 +1,5 @@ --- layout: default -title: box_model.title next: box-sizing prev: max-width num: 5 @@ -26,6 +25,10 @@ } +

+ {% localize box_model.title %} +

+

{% localize box_model.intro %}

diff --git a/templates/box-sizing.html b/templates/box-sizing.html index 0e28f5c..3528397 100644 --- a/templates/box-sizing.html +++ b/templates/box-sizing.html @@ -1,6 +1,5 @@ --- layout: default -title: box_sizing.title next: position prev: box-model num: 6 @@ -26,6 +25,10 @@ } +

+ {% localize box_sizing.title %} +

+

{% localize box_sizing.1 %}

diff --git a/templates/clear.html b/templates/clear.html index 2b952d4..919fea3 100644 --- a/templates/clear.html +++ b/templates/clear.html @@ -1,11 +1,14 @@ --- layout: default -title: clear.title next: clearfix prev: float num: 10 --- +

+ {% localize clear.title %} +

+

{% localize clear.1 %}

diff --git a/templates/clearfix.html b/templates/clearfix.html index 99eeb0e..345861b 100644 --- a/templates/clearfix.html +++ b/templates/clearfix.html @@ -1,11 +1,14 @@ --- layout: default -title: clearfix.title next: float-layout prev: clear num: 11 --- +

+ {% localize clearfix.title %} +

+

{% localize clearfix.1 %}

diff --git a/templates/column.html b/templates/column.html index f2d61a0..40457a2 100644 --- a/templates/column.html +++ b/templates/column.html @@ -1,11 +1,14 @@ --- layout: default -title: column.title next: flexbox prev: inline-block-layout num: 17 --- +

+ {% localize column.title %} +

+

{% localize column.1 %}

diff --git a/templates/css/style.css b/templates/css/style.css index 9e93aae..c4e944e 100644 --- a/templates/css/style.css +++ b/templates/css/style.css @@ -165,7 +165,7 @@ h1.content { direction: ltr; } -.css, .html { +.language-css, .language-html { display: block; text-shadow: 1px 1px 0 black; background-color: #333333; @@ -183,7 +183,7 @@ h1.content { white-space: pre; } -.html:before { +.language-html:before { content: "html"; float: right; color: black; @@ -191,7 +191,7 @@ h1.content { font-size: 1.5em; } -.css:before { +.language-css:before { content: "css"; float: right; color: black; @@ -338,29 +338,10 @@ footer { float: left; } -#share #license { - +#share > li:not(first-child){ + margin-left: 10px; } -#advertisements { - clear: both; - margin: 0 auto; - width: 370px; - text-align: center; -} - -#advertisements span { - font-size: 10px; - font-style: italic; - margin: 0; -} - -#advertisements div { - font-size: 13px; - text-align: left; -} - - @media screen and (min-width:601px) { #menu { @@ -415,7 +396,7 @@ footer { } -@media screen and (max-width:404px) { +@media screen and (max-width:404px) { a.nav { width: 40%; diff --git a/templates/display.html b/templates/display.html index 9957481..16db8d0 100644 --- a/templates/display.html +++ b/templates/display.html @@ -1,11 +1,14 @@ --- layout: default -title: display.title next: margin-auto prev: no-layout num: 2 --- +

+ {% localize display.title %} +

+

{% localize display.intro %}

diff --git a/templates/flexbox.html b/templates/flexbox.html index 093b609..7f570c4 100644 --- a/templates/flexbox.html +++ b/templates/flexbox.html @@ -1,11 +1,14 @@ --- layout: default -title: flexbox.title next: frameworks prev: column num: 18 --- +

+ {% localize flexbox.title %} +

+

{% localize flexbox.1 %}

diff --git a/templates/float-layout.html b/templates/float-layout.html index 8a79843..d7dcf8b 100644 --- a/templates/float-layout.html +++ b/templates/float-layout.html @@ -1,11 +1,14 @@ --- layout: default -title: float_layout.title next: percent prev: clearfix num: 12 --- +

+ {% localize float_layout.title %} +

+

{% localize float_layout.1 %}

diff --git a/templates/float.html b/templates/float.html index 7e092d3..ec7b642 100644 --- a/templates/float.html +++ b/templates/float.html @@ -1,11 +1,14 @@ --- layout: default -title: float.title next: clear prev: position-example num: 9 --- +

+ {% localize float.title %} +

+

{% localize float.1 %}

diff --git a/templates/frameworks.html b/templates/frameworks.html index 2520d9f..2fee606 100644 --- a/templates/frameworks.html +++ b/templates/frameworks.html @@ -1,11 +1,14 @@ --- layout: default -title: frameworks.title next: about prev: flexbox num: 19 --- +

+ {% localize frameworks.title %} +

+

{% localize frameworks.1 %}

@@ -38,14 +41,13 @@ blueprint unsemantic bluetrip - elasticss bootstrap - gumby susy foundation kube groundwork semantic ui + Purecss

diff --git a/templates/images/elasticss.jpg b/templates/images/elasticss.jpg deleted file mode 100644 index 7d41cf4..0000000 Binary files a/templates/images/elasticss.jpg and /dev/null differ diff --git a/templates/images/gumby.jpg b/templates/images/gumby.jpg deleted file mode 100644 index 40c5975..0000000 Binary files a/templates/images/gumby.jpg and /dev/null differ diff --git a/templates/images/logo_pure.png b/templates/images/logo_pure.png new file mode 100644 index 0000000..c211210 Binary files /dev/null and b/templates/images/logo_pure.png differ diff --git a/templates/index.html b/templates/index.html index 66533d4..d1388ca 100644 --- a/templates/index.html +++ b/templates/index.html @@ -39,6 +39,7 @@ {% localize index.pt-pt %} {% localize index.russian %} {% localize index.persian %} + {% localize index.arabic %} {% localize index.chinese %} {% localize index.tradchinese %} {% localize index.korean %} diff --git a/templates/inline-block-layout.html b/templates/inline-block-layout.html index 9ce4717..2f17ffe 100644 --- a/templates/inline-block-layout.html +++ b/templates/inline-block-layout.html @@ -1,11 +1,14 @@ --- layout: default -title: inline_block_layout.title next: column prev: inline-block num: 16 --- +

+ {% localize inline_block_layout.title %} +

+

diff --git a/templates/inline-block.html b/templates/inline-block.html index a3676f6..d4a7bbc 100644 --- a/templates/inline-block.html +++ b/templates/inline-block.html @@ -1,11 +1,14 @@ --- layout: default -title: inline_block.title next: inline-block-layout prev: media-queries num: 15 --- +

+ {% localize inline_block.title %} +

+

{% localize inline_block.1 %}

diff --git a/templates/margin-auto.html b/templates/margin-auto.html index 07946ae..99b8f86 100644 --- a/templates/margin-auto.html +++ b/templates/margin-auto.html @@ -1,6 +1,5 @@ --- layout: default -title: margin_auto.title next: max-width prev: display num: 3 @@ -13,6 +12,10 @@ } +

+ {% localize margin_auto.title %} +

+ {% highlight css %} #main { width: 600px; diff --git a/templates/max-width.html b/templates/max-width.html index 0113c0d..35f61d8 100644 --- a/templates/max-width.html +++ b/templates/max-width.html @@ -1,6 +1,5 @@ --- layout: default -title: max_width.title next: box-model prev: margin-auto num: 4 @@ -13,6 +12,10 @@ } +

+ {% localize max_width.title %} +

+ {% highlight css %} #main { max-width: 600px; diff --git a/templates/media-queries.html b/templates/media-queries.html index 6df8967..fc4c4d0 100644 --- a/templates/media-queries.html +++ b/templates/media-queries.html @@ -1,11 +1,14 @@ --- layout: default -title: media_queries.title next: inline-block prev: percent num: 14 --- +

+ {% localize media_queries.title %} +

+

{% localize media_queries.1 %}

@@ -15,7 +18,7 @@

{% highlight css %} -@media screen and (min-width:600px) { +@media (min-width:600px) { nav { float: left; width: 25%; @@ -41,7 +44,7 @@ margin-left: 25%; } } -@media screen and (max-width:599px) { +@media (max-width:599px) { nav li { display: inline; } @@ -103,4 +106,4 @@

{% localize util.extra_credit %}

{% localize media_queries.5 %}

-
\ No newline at end of file + diff --git a/templates/no-layout.html b/templates/no-layout.html index 8f1bbb4..4409b46 100644 --- a/templates/no-layout.html +++ b/templates/no-layout.html @@ -6,6 +6,10 @@ num: 1 --- +

+ {% localize no_layout.title %} +

+

{% localize no_layout.1 %}

diff --git a/templates/percent.html b/templates/percent.html index e7c43e8..33bc64d 100644 --- a/templates/percent.html +++ b/templates/percent.html @@ -1,11 +1,14 @@ --- layout: default -title: percent.title next: media-queries prev: float-layout num: 13 --- +

+ {% localize percent.title %} +

+

{% localize percent.1 %}

diff --git a/templates/position-example.html b/templates/position-example.html index 6f5c6c5..0e5d5d3 100644 --- a/templates/position-example.html +++ b/templates/position-example.html @@ -1,11 +1,14 @@ --- layout: default -title: position_example.title next: float prev: position num: 8 --- +

+ {% localize position_example.title %} +

+

{% localize position_example.1 %}

diff --git a/templates/position.html b/templates/position.html index 3576efb..50d38f1 100644 --- a/templates/position.html +++ b/templates/position.html @@ -1,11 +1,14 @@ --- layout: default -title: position.title next: position-example prev: box-sizing num: 7 --- +

+ {% localize position.title %} +

+

{% localize position.intro %}

diff --git a/translations/ar.yaml b/translations/ar.yaml new file mode 100644 index 0000000..a55ec89 --- /dev/null +++ b/translations/ar.yaml @@ -0,0 +1,173 @@ +# العربية + +rtl: true + +global.title: "تعلم التصميم باستخدام CSS" +global.short_title: "CSS" +global.home: "الرئيسية" +global.toc: "الفهرس" +global.next: "التالي" +global.previous: "السابق" +global.feedback: "مشاكل / تغذية راجعة" + +util.extra_credit: "ملاحظة إضافية" +util.ipsum: "لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق \"ليتراسيت\" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل \"ألدوس بايج مايكر\" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم." +util.nav.1: "الرئيسية" +util.nav.2: "قائمة الوجبات" +util.nav.3: "الأرشيف" +util.nav.4: "التوقيت" +util.nav.5: "الاتجاهات" +util.nav.6: "اتصل بنا" + +index.1: "هذا الموقع يقوم بتعليمك أساسيات لغة CSS، أو ما تعرف بلغة التنسيق، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية" +index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة : الموقع الإلكتروني التالي. أما لو كانت لديك خبرة فيهما؛ فيُمكنك البدء في هذه الدروس!." +index.translator: "ترجمة: Ahmed Sammour" +index.get_started: "البداية" + +no_layout.title: "لا تصميم!" +no_layout.1: "عدم وجود تصميم في الصفحة يشبه إلى حد كبير، وضع جميع المحتويات في عمود واحد. ومع ذلك؛ فإن جعل نافذة المتصفح عريضة جدًا، هو أمر متعب جدًا للقراءة؛ لأن المستخدم يضطر بعد الانتهاء من قراءة السطر، إلى الانتقال من أقصى يسار الصفحة، إلى أقصي يمين الصفحة. جرب تكبير، وتصغير المتصفح؛ لمعرفة المقصود!." +no_layout.2: "قبل إصلاح هذه المشكلة؛ ينبغي أن تتأكد من معرفتك التعامل مع الخاصية المهمة display. الخواص في CSS هي الوحدة الأساسية، وهي التي تُمكنك من تنسيق، وتصميم العناصر في صفحات الويب." + +display.title: "خاصية \"display\"" +display.intro: "خاصية display، هي أكثر خاصية مهمة في CSS، وخاصة في أمور التحكم في تصميم المواقع. كل عنصر في الموقع، يحتوي على خاصية display افتراضية، وتعتمد قيمة الخاصية على العنصر نفسه. القيمة الافتراضية لمعظم العناصر هي block، أو inline." +display.block.title: "block" +display.block: "div هو العنصر الأساسي في تصميم المواقع، وقيمة الخاصية display الخاصة به تساوي: block. ومن أهم مميزات العناصر التي تمتلك هذه الخاصية أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في لغة HTML5: p، وform، وsection، وfooter، وheader." +display.inline.title: "inline" +display.inline.1: "عنصر span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات." +display.inline.2: "مثل هذا" +display.inline.3: "من دون قطع سياق الفقرة. عنصر a هو أكثر العناصر التي تُستخدم لهذا الغرض، والتي نستخدمها بكثرة في الوصلات. " +display.none.title: "none" +display.none.1: "أحد القيم المهمة الأخرى هي none. بعض العناصر تستخدم هذه القيمة، وأشهر الأمثلة على ذلك عنصر script؛ والذي يستخدم لتضمين كود جافا سكريبت داخل الصفحات. يمكن استخدام هذه القيمة في جافا سكريبت لإخفاء، أو إظهار عناصر معينة." +display.none.2: "يختلف ذلك عن خاصية visibility؛ حيث أننا عندما نُعيّن قيمة none لخاصية display؛ فإننا نقوم بتحميل محتوى الصفحة كما لو أن العنصر غير موجود. أما visibility: hidden;؛ فتقوم بإخفاء العنصر فقط، ويظل أثر العنصر موجودًا في الصفحة." +display.other.title: "قيم أخرى" +display.other: "هناك قيم أخرى لخاصية display. مثل قيمة list-item، و قيمة table، وقيمة table. هذه قائمة بكل قيم خاصية display. سنقوم بشرح القيمتين: inline-block، وflex لاحقًا." +display.extra: "كما ذكرنا أعلاه؛ كل عنصر له قيمة display افتراضية. وعلى كل حال، يمكن دائمًا تغيير القيمة القديمة، بقيمة أخرى." + +margin_auto.title: "توسيط العناصر" +margin_auto.1: "يُمكنك ضبط العرض الخاص بأي عنصر وذلك باستخدام خاصية width؛ وسيمنع العنصر من أن يمتد من أقصى اليمين، إلى أقصى اليسار. أيضًا، يمكن ضبط الهوامش؛ لجعل العنصر متوسط الصفحة، باستخدام خاصية margin، وذلك بجعل القيمة تساوي auto. " +margin_auto.2: "المشكلة الوحيدة التي ستحدث، هي إذا حاولت عرض الصفحة على متصفح ما، وكان عرض المتصفح أضيق من عرض العنصر ذاته. سيقوم المتصفح بحل ذلك من خلال إضافة شريط scrollbar أفقي. لنقم بتطوير الأمر قليلًا." + +max_width.title: "max-width" +max_width.1: "استخدام خاصية max-width بدلًا من خاصية width في هذا الموقف؛ سيجعل المتصفح يتحكم بفعالية أكثر مع الشاشات الصغيرة. يعتبر هذا الموضوع مهمًا، إذا كنت تود جعل الموقع مستخدمًا بسهولة على الجوال. قم بتكبير، وتصغير المتصفح لرؤية الفرق. " +max_width.2: "بالمناسبة، خاصية max-width مدعومة في جميع المتصفحات، ومن ضمنها إنترنت إكسبلورر 7+؛ لذا لا داعي للقلق من هذا الأمر." + +box_model.title: "box model" +box_model.intro: "بينما تحدثنا عن خاصية width، كان يتوجب التنويه إلى أهم مشكلة لهذه الخاصية، وهي عندما تقوم بضبط العرض الخاص بعنصر ما، سيظهر العنصر أكبر من الحجم الذي قمت بضبطه. وتفسير الأمر، هو أن وجود حواشي العنصر (padding)، وحدود العنصر (border) ستقوم بتمديد عرض العنصر إلى ما بعد الحد الذي قمت بضبطه. انظر إلى المثال التالي؛ حيث يوجد عنصران، وبنفس قيمة العرض، ولكن مع اختلاف حقيقي بين عرض العنصرين." +box_model.simple: "أنا العنصر الصغير!" +box_model.fancy: "وأنا الكبير!" +box_model.outro: "حل هذه المشكلة هو حل رياضي. حيث يقوم مطورو صفحات الويب باستخدام CSS، بتحديد قيمة أصغر من التي يريدونها فعليًا، والتي تساوي القيمة الأولية، مطروحًا منها قيمة الحواشي، والحدود. من حسن الحظ، لن نحتاج لهذا بعد الآن!." + +box_sizing.title: "خاصية box-sizing" +box_sizing.1: "يمكن اعتبار العناصر الموجودة ضمن كود html عبارة عن صناديق. ونستخدم مصطلح box-model للتعبير عن تصميم كل عنصر في الصفحة. لهذا السبب وُجدت خاصية box-sizing. يتكون box-model من أربع أشياء: هامش خارجي، وإطار، وهامش داخلي، ومحتوى العنصر نفسه. المثال التالي يوضح كيفية استخدام خاصية box-sizing: border-box;" +box_sizing.simple: "نحن بنفس الحجم الآن." +box_sizing.fancy: "رائع!" +box_sizing.2: "الأمر الآن أفضل، أليس كذلك؟. غالبًا ما يريد مطورو الويب جعل جميع العناصر تبدو بهذه الطريقة. ولتحقيق ذلك، يقوم المطورون بكتابة الكود التالي:" +box_sizing.3: "هذا الكود يضمن أن جميع العناصر الموجودة في الصفحة، مُحجّمة بشكل ذكي." +box_sizing.4: "ولأن box-sizing هي خاصية جديدة نسبيًا؛ فينبغي عليك استخدام -webkit- و -moz- كما هو واضح في هذه الأمثلة. هذه الميزة، توفر خواص لا تزال تحت التجربة، أيضًا، ينبغي أن تأخذ بالحسبان أن هذه الخاصية تعمل على إنترنت إكسبلورر +8." + +position.title: "التموضع" +position.intro: " لغرض إنشاء تصميم صفحات معقدة؛, ينبغي أن نناقش خاصية position. هذه الخاصية لها العديد من القيم، وهذه القيم من الصعب تذكرها. لنقم بالمرور عليها واحدة، تلو الأخرى. ويفضل أن تضع هذه الصفحة بالتحديد في مفضلتك؛ لتتمكن من الرجوع إليها بسهولة مستقبلًا." +position.static.title: "static" +position.static.1: "static هي القيمة الافتراضية. العنصر الثابت يمكن اعتباره بدون موضع +والعنصر الذي يملك أي قيمة أخرى يمكن اعتباره عنصرًا محددًا بموضع." +position.relative.title: "relative" +position.relative.1: "relative تملك نفس صفات static تقريبًا. إلا إذا قمتَ بإضافة بعض الخصائص الأخرى." +position.relative.2: "يمكن إضافة بعض الصفات الأخرى لهذه القيمة، مثل top، right، bottom، و left. هذه الصفات ستجعل العنصر مُعدّلًا عن الوضع الأصلي. أي محتوى آخر لا يمكن تعديله ليملئ أي فراغ يتركه العنصر الأخير." +position.fixed.title: "fixed" +position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft." +position.fixed.2: " متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان." +position.fixed.3: "العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة." +position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم ضعيف لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا." +position.fixed.example: "مرحبًا!. أنا عنصر ثابت لا أتحرك." +position.absolute.title: "absolute" +position.absolute.1: "قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عنصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body)." +position.absolute.2: "هذا مثال بسيط" +position.absolute.relative: "هذا العنصر تم تحديده بواسطة أقرب عنصر له. لو كان هذا العنصر يملك خاصية position: static; فإنه سيتم تحديد موضعه حتما بالنسبة إلى جسم الصفحة." +position.absolute.absolute: "هذا العنصر يملك خاصية absolute. هذا يعني أنه تم تحديد موقعه نسبة إلى أقرب عنصر له." +position.absolute.3: "هذه الأمور صعبة بعض الشيء، ولكنها ضرورية جدًا لتصميم صفحات الويب. في الصفحات القادمة سنستخدم خاصية position في أمثلة واقعية أكثر." + +position_example.title: "مثال على خاصية position" +position_example.1: "هذا المثال واقعي جدًا. ويبدو قريبًا لتصميم صفحة ويب واقعية." +position_example.section.1: "استخدام خاصية margin-left لكل قسم section يضمن أن هناك هامشًا مناسبًا لكل عنصر. عدا ذلك؛ سنجد العناصر متداخلة مع بعضها البعض." +position_example.section.2: "لاحظ الفرق عندما تقوم بتضغير أو تكبير متصفحك. إنه يعمل بشكل رائع الآن!" +position_example.2: "هذا المثال يعمل بشكل جيد لسبب منطقي، وهو أن المحتوى (container) أطول من الشريط العمودي في يسار الشاشة (nav). لو لم يكن كذلك؛ فهذا يعني أن الشريط سيتجاوز حدوده ليدخل في مساحة المحتوى. في الصفحات القادمة سنتعلم بعض تقنيات التصميم، والتي لكل منها إيجابيات، وسلبيات." +position_example.footer: "إذا كنت تستخدم رأس، أو ذيل صفحة ثابت، تأكد أن هناك مساحة كافية له!. تم وضع خاصية margin-bottom في جسم الصفحة body." + +float.title: "float" +float.1: "هذه خاصية أخرى شائعة الاستخدام، وتستخدم بشكل واسع في تصميم صفحات الويب. خاصية Float تهدف أساسًا لجعل النص ملتفًا حول الصور هكذا:" + +clear.title: "clear" +clear.floating: "أشعر أنني أطير فوق العناصر الأخرى!." +clear.1: "خاصية clear مهمة جدًا للتحكم في طبيعة خاصية float. لاحظ الفرق بين المثالين التاليين" +clear.2: "في هذه الحالة، عنصر section هو في الحقيقة بعد العنصر div. ومع ذلك، فإن العنصر div موجود في يسار الشاشة. إليك تفسير ما حصل: النص الموجود في عنصر section ملتف حول العنصر div، وأما العنصر section فإنه ملتف على كامل الصفحة. ماذا لو أردنا أن يظهر العنصر section بعد العنصر الآخر؟" +clear.3: "باستخدام هذه الخاصية clear قمنا بتحريك القسم أسفل العنصر div. استخدم القيمة left لجعل العناصر في اليسار. كما يمكنك استخدام القيم: right، وboth." + +clearfix.title: "خدعة clearfix" +clearfix.1: "هذا أمر سيء يمكن أن يحصل عند استخدام خاصية float:" +clearfix.2: "أوه لا ... هذه الصورة أطول من العنصر الذي يحتوي عليها. ومع أنها تحتوي على خاصية float؛ إلا أنها تجاوزت حدود العنصر الذي يحتوي عليها!." +clearfix.3: "حسنًا. هناك طريقة بالطبع لحل ذلك. لكنه حل بشع!. يُسمى هذا الحل ب clearfix خدعة." +clearfix.4: "لنجرب إضافة هذا الكود:" +clearfix.5: "لنر الآن ماذا سيحدث:" +clearfix.6: "أفضل بكثير!" +clearfix.7: "هذا الحل يعمل فقط في المتصفحات الحديثة. إذا كنت تريد أن تدعم المتصفحات القديمة مثل إنترنت إكسبلورر 6 لهذا الحل؛ قم بالآتي:" +clearfix.8: "هناك متصفحات قليلة لا تدعم الطريقة بشكل جيد، وتتطلب منك الانتباه. عالم هذه الخدعة مخيف حقًا، لكن هذا الحل البسيط فعّال مع غالبية المتصفحات الشهيرة." + +float_layout.title: "مثال تصميم باستخدام float" +float_layout.1: "من الشائع جدًا تصميم مواقع ويب كاملة باستخدام خاصية float. هذا نفس التصميم الذي قمنا به باستخدام خاصية position، ولكن باستخدام خاصية float بدلًا منها." +float_layout.2: "هذا المثال يعمل تمامًا كالمثال السابق. لاحظ أننا قمنا بكتابة clearfix في المحتوى (container). قد لا نحتاج لذلك في هذا المثال، لكنه سيكون مجديًا في حال كان الشريط nav أطول من المحتوى الآخر." + +percent.title: "العرض المئوي" +percent.1: "النسبة المئوية هي وحدة قياس تستخدم في تحديد أبعاد العنصر. يكون استخدام النسب المئوية رائعًا عند إدراج الصور. هنا مثال على صورة تأخذ 50% من حجم العنصر الذي يحتوي عليها. ما يعني أنه مهما تغير حجم العنصر، فإن الصورة ستأخذ نصف العرض." +percent.2: "بإمكانك أيضًا استخدام min-width و max-width لتحديد أقل عرض، أو أكبر عرض يمكن للصورة أن تأخذه!." +percent.layout.title: "تصميم الصفحات باستخدام العرض المئوي" +percent.layout.1: "يمكنك استخدام النسب المئوية في تصميم صفحات الويب، لكن ذلك سيتطلب منك وقتًا أكثر. في المثال التالي، يكون محتوى العنصر nav ملتفًا بطريقة جيدة عندما تكون نافذة المتصفح ضيقة." +percent.layout.2: "عندما يكون التصميم ضيقًا جدًا، يصبح العنصر nav غير ظاهر تقريبًا. والأمر الأسوأ، هو أنك لا تستطيع استخدام خاصية min-width في العنصر nav؛ لأن العمود الأيمن لن يقبل هذه الخاصية." + +media_queries.title: "استخدام استعلامات media" +media_queries.1: "\"التصميم المرن، أو المطاط\" هو استراتيجية لجعل الموقع \"يستجيب\" للمتصفح، والجهاز الذي يتم عرض الموقع منه. وذلك من خلال جعل الموقع يظهر بشكل رائع، مهما كان المتصفح، أو الجهاز الذي تقوم بالاستعراض منه." +media_queries.2: "استعلامات media هي أقوى أداة لتحقيق هذا الأمر. لنأخذ المثال الذي قمنا بتصميم صفحة باستخدام العرض المئوي، ولنضعها في عمود واحد، ثم نشاهد كيف ستبدو عندما يكون المتصفح صغيرًا جدًا." +media_queries.3: "الآن عندما تقوم بتكبير أو تصغير المتصفح، سيصبح شكل الصفحة رائعًا أكثر!." +media_queries.4: "أوه! الأن تبدو الصفحة رائعة عند التصفح من الجوال. هنا ستجد بعض المواقع الشهيرة التي تستخدم استعلامات media بهذه الطريقة. هناك الكثير الكثير يمكنك اكتشافه. الق نظرة على شرح شبكة موزيلا للمطورين لمعرفة المزيد." +media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والأجهزة اللوحية وذلك باستخدام وسم meta viewport." + +inline_block.title: "inline-block" +inline_block.1: "يمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة." +inline_block.hard_way.title: "الطريقة الصعبة (استخدام float)" +inline_block.hard_way.box: "أنا أطير الآن!" +inline_block.hard_way.after: "أنا أستخدم خاصية clear." +inline_block.easy_way.title: "الطريقة السهلة (استخدامinline-block)" +inline_block.easy_way.info: "بإمكانك تحقيق نفس الهدف باستخدام القيمة inline-block مع الخاصية display." +inline_block.easy_way.box: "أنا عنصر مُضمن!" +inline_block.easy_way.after: "لا أحتاج لاستخدام clear في هذه الحالة. جميل!" +inline_block.2: "ينبغي عليك الاطلاع على بعض الأمور الإضافية في أمور دعم إنترنت إكسبلورر 6، و7 لخاصية inline-block. انظر الروابط السابقة لمعرفة كيفية دعم المتصفحات القديمة مثل IE6 و IE7. عدا ذلك؛ دعنا نكمل!." + +inline_block_layout.title: "التصميم باستخدام inline-block" +inline_block_layout.1: "بإمكانك أيضًا استخدام خاصية inline-block لتصميم الصفحات. هناك بضعة أمور ينبغي أن تأخذها بعين الاعتبار:" +inline_block_layout.caveat.1: "العناصر التي لها خاصية inline-block تتأثر بالخاصية vertical-align، وينبغي عليك تحديدها غالبًا ب top." +inline_block_layout.caveat.2: "يجب عليك تحديد عرض كل عمود في ال" +inline_block_layout.caveat.3: "سيكون هناك فراغ بين الأعمدة، إذا كانت توجد مسافات فاصلة في كود الhtml" +inline_block_layout.tada: "رائع!" +column.title: "العمود" +column.1: "هناك العديد من الخصائص التي يمكنك استخدامها، والتي تجعل النص مُنسقًا في شكل أعمدة. ألق نظرة:" +column.2: "استخدام الأعمدة في css حديث نسبيًا، فربما لا يعمل مع إنترنت إكسبلورر9، وأوبرا ميني. هناك بعض الخصائص المتعلقة باستخدام الأعمدة، انظر هنا لمعرفة المزيد. عدا ذلك؛ دعنا نكمل." + +flexbox.title: "تصميم flexbox" +flexbox.1: "يمكننا تصميم صفحات الويب باستخدام وحدة تُسمى flexbox ،وهي وحدة عصرية ساهمت في إعادة صياغة تصميم صفحات الويب. مع الأسف، تغيرت بعض الأمور مع كثرة المتصفحات، والخصائص التي توفرها. ولكن مع ذلك، سنقوم بمشاركة بعض الأمثلة لتوضيح المفهوم. هذه الأمثلة تعمل حاليًا فقط على بعض المتصفحات التي تستخدم آخر إصدار من flexbox." +flexbox.2: "هناك الكثير من إصدارات flexbox غير المدعومة. إذا كنت تود تعلم المزيد حول هذه الوحدة,،ابدأ من هنا لمعرفة إذا ما كان الأمر مدعومًا أم لا. قمنا بكتابة مقالة مفصلة لشرح كيفية التعامل مع هذه الوحدة." +flexbox.3: "هناك امور كثيرة يمكنك فعلها مع وحدة flexbox. هذه بعض الأمثلة لتوضيح الفكرة:" +flexbox.simple.title: "تصميم بسيط باستخدام flexbox" +flexbox.simple.1: "استخدام flexbox سهل جدًا" +flexbox.fancy.title: "تصميم رائع باستخدام flexbox" +flexbox.fancy.1: "سيكون حجم هذا العنصر 200 بيكس إذا كان هناك فراغ مناسب، وسيتقلص إلى 100 بيكسل في حال عدم وجود فراغ. ولن يكون أصغر من 100 بيكسل." +flexbox.fancy.2: "سيكون هذا العنصر دائمًا بحجم 200 بيكسل، مهما حدث." +flexbox.fancy.3: "سيملأ هذا العنصر ثلث المساحة المتبقية" +flexbox.fancy.4: "سيملأ هذا العنصر ثُلثي المساحة المتبقية" +flexbox.centering.title: "التوسيط باستخدام flexbox" +flexbox.centering.1: "أخيرًا، من السهل جدًا توسيط عنصر ما باستخدام css." + +frameworks.title: "أُطر عمل css" +frameworks.1: "لأن تصميم الصفحات باستخدام css مُجهد نوعًا ما؛ يوجد هناك أُطر عمل تجعل من أمر التصميم سهلًا. نعني بأُطر العمل أي الأكواد التي قام مطورون بكتابتها سابقًا، وبدلًا من إعادة كتابة الأكواد من جديد؛ فإننا نستخدم أُطر العمل في توفير الوقت والجهد. هنا ستجد بعضًا من أُطر العمل الشهيرة. يُرجى اختيار إطار العمل المناسب، والذي يمكنه تسهيل مهمتك في تصميم الصفحات، والذي يؤدي الغرض الخاص. بالطبع لا غنى عن معرفتك بأساسيات css حتى تتمكن من استخام هذه الأُطر." +frameworks.2: "هذا كان كل شيء! إذا كانت لديك أي استفسارات، أو مشاكل بخصوص هذا الموقع، تفضل بإعلامنا بذلك.!" + +about.title: "عن هذا الموقع" +about.credits: "تم كتابته، وبناءه بواسطة: غريغ سميث. تصميم: إسحاق دورازو. نحن نعمل في شركة Bocoup." \ No newline at end of file diff --git a/translations/defaults.yaml b/translations/defaults.yaml index 83ee4ca..eea10eb 100644 --- a/translations/defaults.yaml +++ b/translations/defaults.yaml @@ -9,6 +9,7 @@ index.german: "deutsch" index.dutch: "dutch" index.pt-br: "português (brasil)" index.pt-pt: "português (português)" +index.arabic: "عربى" index.italian: "italiano" index.japanese: "日本語" index.russian: "русский" \ No newline at end of file diff --git a/translations/en.yaml b/translations/en.yaml index 8508719..a088fb0 100644 --- a/translations/en.yaml +++ b/translations/en.yaml @@ -53,10 +53,10 @@ box_model.title: "the box model" box_model.intro: "While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result." box_model.simple: "I'm smaller..." box_model.fancy: "And I'm bigger!" -box_model.outro: "For generations, the solution to this problem has been math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..." +box_model.outro: "For generations, the solution to this problem has been extra math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..." box_sizing.title: "box-sizing" -box_sizing.1: "Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" +box_sizing.1: "The original box model behavior was eventually considered unintuitive, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" box_sizing.simple: "We're the same size now!" box_sizing.fancy: "Hooray!" box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:" @@ -164,7 +164,7 @@ flexbox.centering.title: "Centering using Flexbox" flexbox.centering.1: "Finally, it's easy to vertically center something in CSS!" frameworks.title: "css frameworks" -frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works." +frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only a good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works." frameworks.2: "That's it! If you have any feedback on this site, please let me know on Twitter!" about.title: "about this site" diff --git a/translations/es.yaml b/translations/es.yaml index 4adc7a3..95ca5b3 100644 --- a/translations/es.yaml +++ b/translations/es.yaml @@ -11,14 +11,14 @@ global.feedback: "Problemas / Recomendaciones" util.extra_credit: "crédito extra" util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit." util.nav.1: "Inicio" -util.nav.2: "Taco Menu" +util.nav.2: "Taco Menú" util.nav.3: "Lista de Pendientes" util.nav.4: "Horas" util.nav.5: "Direcciones" util.nav.6: "Contacto" index.1: "Este sitio enseña los fundamentos de CSS usados para estructurar cualquier sitio web." -index.2: "Supongo que ya sabes lo que son los selectores, propiedades y valores. Y probablemente sabes algo de cómo estructurar un sitio web, sin embargo puede que aun sea motivo de ira y frustración para ti. Si quieres aprender HTML y CSS desde el principio, deberías checar este tutorial. Si no, veamos si podemos salvarte de algunos enojos en tu próximo proyecto." +index.2: "Supongo que ya sabes lo que son los selectores, propiedades y valores. Y probablemente sabes algo de cómo estructurar un sitio web, sin embargo puede que aun sea motivo de ira y frustración para ti. Si quieres aprender HTML y CSS desde el principio, deberías ver este tutorial. Si no, veamos si podemos salvarte de algunos enojos en tu próximo proyecto." index.translator: "Traducido por Isaac Durazo" index.get_started: "Comenzar" @@ -27,7 +27,7 @@ no_layout.1: "No tener estructura en tu sitio está bien si lo que quieres es te no_layout.2: "Antes de arreglar este problema, cerciorémonos de que entendemos la importancia de la propiedad display." display.title: "la propiedad \"display\"" -display.intro: "display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de que tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemento que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline." +display.intro: "display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de qué tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemento que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline." display.block.title: "block" display.block: "El div es el elemento block-level estándar. Un elemento block-level comienza en una nueva línea y se estira hasta la derecha e izquierda tan lejos como pueda. Otros elementos block-level muy comunes son p y form, y algunos nuevos en HTML5 son header, footer y section." display.inline.title: "inline" @@ -35,7 +35,7 @@ display.inline.1: "El span es el elemento inline estándar. Un elem display.inline.2: "como esto" display.inline.3: "sin interrumpir el flujo del párrafo. El elemento a es el elemento inline más común, ya que se usa para links." display.none.title: "none" -display.none.1: "Otro valor común de display es none. Algunos elementos especializados como script usan este por defecto. Es comunmente usado en JavaScript para ocultar o mostrar elementos sin eliminarlos ni recrearlos." +display.none.1: "Otro valor común de display es none. Algunos elementos especializados como script usan este por defecto. Es comúnmente usado en JavaScript para ocultar o mostrar elementos sin eliminarlos ni recrearlos." display.none.2: "Esto es diferente de visibility. Usar display: none no dejará espacio donde el elemento se encontraba, pero visibility: hidden; dejará un espacio vacío." display.other.title: "otros valores de display" display.other: "Hay bastantes valores exóticos de display, como list-item y table. Aquí hay una lista exhaustiva. Discutiremos inline-block y flex después." @@ -46,17 +46,17 @@ margin_auto.1: "Ajustar la propiedad width de un elemento block-lev margin_auto.2: "El único problema ocurre cuando el ancho del navegador es menor que el de tu elemento. El navegador resuelve esto creando una barra de desplazamiento (scrollbar) horizontal en la página. Arreglemos esa situación..." max_width.title: "max-width" -max_width.1: "Usar max-width (ancho máximo) en lugar de width en esta situación, mejorará la situación cuando la ventana del navegador sea pequeña. Esto es importante cuando estamos haciendo un sitio para dispositivos móviles. ¡Has la ventana del navegador mas pequeña para que te des cuenta!" -max_width.2: "Por cierto, max-width es compatible en la mayoría de los navegadores incluyendo IE7+, asi que no tengas miedo de usarlo." +max_width.1: "Usar max-width (ancho máximo) en lugar de width en esta situación, mejorará la situación cuando la ventana del navegador sea pequeña. Esto es importante cuando estamos haciendo un sitio para dispositivos móviles. ¡Haz la ventana del navegador mas pequeña para que te des cuenta!" +max_width.2: "Por cierto, max-width es compatible en la mayoría de los navegadores incluyendo IE7+, así que no tengas miedo de usarlo." box_model.title: "box model" -box_model.intro: "Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: La propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferentes tamaño al final." +box_model.intro: "Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: la propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferente tamaño al final." box_model.simple: "Soy más chico..." box_model.fancy: "¡Y yo soy más grande!" box_model.outro: "Por generaciones, la solución a este problema han sido las matemáticas. Autores de CSS han tenido que escribir valores más pequeños para width de lo que en realidad querían, restando el padding y border. Afortunadamente ya no tienes que hacer eso..." box_sizing.title: "box-sizing" -box_sizing.1: "Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, asi que una nueva propiedad CSS llamada box-sizing fué creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aqui está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:" +box_sizing.1: "Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, así que una nueva propiedad CSS llamada box-sizing fue creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aquí está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:" box_sizing.simple: "¡Ahora somos del mismo tamaño!" box_sizing.fancy: "¡Hurra!" box_sizing.2: "Ya que esto es mucho mejor, algunos autores quieren que todos los elementos de sus páginas trabajen de la misma manera. Estos autores ponen lo siguiente en sus páginas:" @@ -72,35 +72,35 @@ position.relative.1: "relative (relativo) se comporta de la misma m position.relative.2: "Establecer las propiedades top, right, bottom, y left de un elemento con position: relative; causará que su posición normal se reajuste. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento." position.fixed.title: "fixed" position.fixed.1: "Un elemento fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página. Al igual que con relative, las propiedades top, right, bottom, y left también son usadas." -position.fixed.2: "Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aqui está el CSS que lo posiciona donde está:" +position.fixed.2: "Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aquí está el CSS que lo posiciona donde está:" position.fixed.3: "Un elemento con valor fixed no deja espacio en el lugar de la página donde estaba ubicado normalmente." -position.fixed.4: "Los buscadores móviles, sorprendentemente no tienen muy buen soporte para el valor fixed. Aprende más al respecto aqui." -position.fixed.example: "Hello! Don't pay attention to me yet." +position.fixed.4: "Los buscadores móviles, sorprendentemente, no tienen muy buen soporte para el valor fixed. Aprende más al respecto aquí." +position.fixed.example: "Hola! No me prestes atención todavía" position.absolute.title: "absolute" position.absolute.1: "absolute (absoluto) es el valor más mañoso. absolute se comporta como fixed pero es relativo a su ancestro posicionado más cercano en lugar de ser relativo a la ventana del navegador. Si un elemento con position: absolute; no tiene ancestros posicionados, usará el elemento body del documento, y se seguirá moviendo al hacer scroll en la página. Recuerda, un elemento \"posicionado\" es aquel cuyo valor es cualquiera excepto static." -position.absolute.2: "Aqui hay un ejemplo sencillo:" +position.absolute.2: "Aquí hay un ejemplo sencillo:" position.absolute.relative: "Este elemento está usando position: relative;. Si estuviera usando position: static; su sucesor con position: asbsolute; escaparía y se posicionaría relativamente al body del documento." position.absolute.absolute: "Este elemento tiene position: asbsolute;. Se posiciona de manera relativa a su ancestro." position.absolute.3: "Sé que esto es complicado, pero es esencial para crear estructuras con CSS de manera correcta. En la siguiente página usaremos position en un ejemplo más práctico." position_example.title: "ejemplo de position" -position_example.1: "Todo esto de position talvez tenga un poco más de sentido con un ejemplo práctico. Abajo, esta la estructura real de una página." +position_example.1: "Todo esto de position tal vez tenga un poco más de sentido con un ejemplo práctico. Abajo está la estructura real de una página." position_example.section.1: "El estilo margin-left para section, es para que haya espacio para nav." position_example.section.2: "Mira lo que pasa si haces la ventana de tu navegador mas pequeña. ¡Funciona!" position_example.2: "Este ejemplo funciona porque el contenedor es más alto que el nav. Si no lo fuera, el nav se saldría de su contenedor. En las páginas que vienen a continuación discutiremos otras técnicas para estructurar y hablaremos de sus pros y sus contras." position_example.footer: "Si usas un header o footer con valor fixed, asegurate de que haya espacio para él. Yo puse un margin-bottom en el body." float.title: "float" -float.1: "Otra propiedad CSS para estructurar es float (flotar). Float se usa para envolver imágenes con texto, como aqui:" +float.1: "Otra propiedad CSS para estructurar es float (flotar). Float se usa para envolver imágenes con texto, como aquí:" clear.title: "clear" clear.floating: "¡Siento que estoy flotando!" clear.1: "La propiedad clear (despejar) es importante para controlar el comportamiento de los floats. Compara estos dos ejemplos:" -clear.2: "En este caso, el elemento section está después del div. Sin embargo, ya que el div está siendo flotado a la izquierda, esto es lo que pasa: el texto en el elemento section flota alrededor del div y el elemento section rodea todo. ¿Qué pasaría si quisiéramos que section apareciera despues del elemento que está flotando?" +clear.2: "En este caso, el elemento section está después del div. Sin embargo, ya que el div está flotado a la izquierda, esto es lo que pasa: el texto en el elemento section flota alrededor del div y el elemento section rodea todo. ¿Qué pasaría si quisiéramos que section apareciera despues del elemento que está flotando?" clear.3: "Usando clear hemos movido esta sección hacia abajo del div que está flotando. Para despejar elementos que están flotando a la izquierda debes usar el valor left. También puedes despejar hacia la derecha usando right y hacia ambos lados usando both." clearfix.title: "clearfix hack" -clearfix.1: "Aqui hay una situación extraña que puede pasar cuando usas float:" +clearfix.1: "Aquí hay una situación extraña que puede pasar cuando usas float:" clearfix.2: "Uh oh... esta imagen es mas alta que el elemento que la contiene, y está flotando, ¡y se sale de su contenedor!" clearfix.3: "Hay una manera de arreglar esto, pero es un poco fea. Se llama clearfix hack." clearfix.4: "Intentemos añadir esto a nuestro CSS:" @@ -110,21 +110,21 @@ clearfix.7: "Esto funciona con navegadores modernos. Si quieres soportar IE6 nec clearfix.8: "Hay navegadores exóticos que requieren atención extra. El mundo del clearfixing es bastante espantoso, pero esta simple solución funcionará para la mayoría de los navegadores de hoy en día." float_layout.title: "estructuras con float" -float_layout.1: "Es muy común hacer estructuras completas usando float. Aqui está la misma estructura que usamos con position hace rato, pero usando float." -float_layout.2: "Este exemplo funciona igual que el otro. Fíjate que pusimos un clearfix en el contenedor. No se necesita en este ejemplo, pero se necesitaría si nav fuera mas largo que el contenido no flotado." +float_layout.1: "Es muy común hacer estructuras completas usando float. Aquí está la misma estructura que usamos con position hace rato, pero usando float." +float_layout.2: "Este ejemplo funciona igual que el otro. Fíjate que pusimos un clearfix en el contenedor. No se necesita en este ejemplo, pero se necesitaría si nav fuera mas largo que el contenido no flotado." percent.title: "width y porcentaje" -percent.1: "Porcentaje es una unidad de medida relativa al bloque contenedor. Es muy útil para imágenes: aqui tenemos una imagen que ocupa el 50% de su contenedor en todo momento. ¡Haz la página mas pequeña para que veas lo que pasa!" +percent.1: "Porcentaje es una unidad de medida relativa al bloque contenedor. Es muy útil para imágenes: aquí tenemos una imagen que ocupa el 50% de su contenedor en todo momento. ¡Haz la página mas pequeña para que veas lo que pasa!" percent.2: "¡Puedes incluso usar min-width y max-width para limitar que tan grande o pequeña puede ser la imagen!" percent.layout.title: "estructuras con porcentaje de ancho" -percent.layout.1: "Puedes usar porcentaje para estructuras, pero esto puede requerir más trabajo. En este ejemplo, el contendido de nav empieza a desenvolverse de una forma desagradable cuando la ventana es muy angosta. Asi que todo se reduce a lo que funcione mejor en tu sitio." +percent.layout.1: "Puedes usar porcentaje para estructuras, pero esto puede requerir más trabajo. En este ejemplo, el contendido de nav empieza a desenvolverse de una forma desagradable cuando la ventana es muy angosta. Así que todo se reduce a lo que funcione mejor en tu sitio." percent.layout.2: "Cuando esta estructura es muy angosta, el nav es apretado. Lo peor es que no puedes usar min-width en el nav para arreglarlo, porque la columna de la derecha no lo respetaría." media_queries.title: "media queries" media_queries.1: "\"Responsive Design\" (Diseño Responsivo) es la estrategia para hacer que un sitio \"responda\" al navegador y dispositivo en el que se muestra... haciendo que se vea increible pase lo que pase." media_queries.2: "Los media queries son la herramienta más poderosa para hacer esto. Tomemos la estructura donde usamos porcentajes y transformémosla en una columna cuando la ventana del navegador es muy pequeña para mantener el menú en la barra lateral:" media_queries.3: "¡Ahora, cuando modificas el tamaño de tu navegador tu estructura se ve mejor que nunca!" -media_queries.4: "Ahora, nuestra estructura se ve increible en dispositivos móviles. Aqui están algunos sitios populares que usan media quieries del mismo modo. Hay muchas otras cosas además de min-width y max-width que puedes detectar: mira la documentación de Mozilla para aprender más." +media_queries.4: "Ahora, nuestra estructura se ve increíble en dispositivos móviles. Aquí están algunos sitios populares que usan media quieries del mismo modo. Hay muchas otras cosas además de min-width y max-width que puedes detectar: mira la documentación de Mozilla para aprender más." media_queries.5: "Puedes hacer que tu estructura se vea aun mejor en dispositivos móviles usando meta viewport." inline_block.title: "inline-block" @@ -133,7 +133,7 @@ inline_block.hard_way.title: "El método difícil (usando float)" inline_block.hard_way.box: "¡Estoy flotando!" inline_block.hard_way.after: "Estoy usando clear para no flotar arriba de las cajas." inline_block.easy_way.title: "El método fácil (usando inline-block)" -inline_block.easy_way.info: "Puedes logar el mismo efecto usando display: inline-block;" +inline_block.easy_way.info: "Puedes lograr el mismo efecto usando display: inline-block;" inline_block.easy_way.box: "¡Soy inline block!" inline_block.easy_way.after: "En este caso no tengo que usar clear. ¡Bien!" inline_block.2: "Para soportar inline-block en IE6 y IE7 tendrás que trabajar extra. Algunas personas hablan de que inline-block desencadena algo llamado hasLayout, sin embargo, necesitarás saber eso solo si soportas viejos navegadores. Da click en el link anterior acerca de IE6 y IE7 si estás interesado en saber más. De lo contrario, continuemos con el siguiente tema." @@ -147,11 +147,11 @@ inline_block_layout.tada: "¡Tarán!" column.title: "columna" column.1: "Hay un nuevo set de propiedades CSS que te permiten tener múltiples columnas de texto. Echa un vistazo:" -column.2: "Esta propiedad CSS es muy nuevas, asi que tendrás que usar prefijos, y no funcionará en IE9 o en Opera Mini. Para ver mas propiedades relacionadas con columnas, haz click aqui. Ahora, sigamos con el siguiente tema." +column.2: "Esta propiedad CSS es muy nuevas, así que tendrás que usar prefijos, y no funcionará en IE9 o en Opera Mini. Para ver mas propiedades relacionadas con columnas, haz click aquí. Ahora, sigamos con el siguiente tema." flexbox.title: "flexbox" -flexbox.1: "La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y si implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, asi podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar." -flexbox.2: "Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aqui para saber como identificar si un recurso está actualzado o no. Echa un vistazo al artículo que escribí al respecto con lo último en sintáxis." +flexbox.1: "La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y su implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, así podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar." +flexbox.2: "Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aquí para saber como identificar si un recurso está actualzado o no. Echa un vistazo al artículo que escribí al respecto con lo último en sintáxis." flexbox.3: "Hay mucho más que puedes hacer con flexbox; estos son solo unos ejemplos para que te des una idea:" flexbox.simple.title: "Estructura Simple usando Flexbox" flexbox.simple.1: "¡Flexbox es muy fácil!" @@ -164,7 +164,7 @@ flexbox.centering.title: "Centrando con Flexbox" flexbox.centering.1: "¡Finalmente es fácil centrar verticalmente con CSS!" frameworks.title: "frameworks para css" -frameworks.1: "Debido a que las estructuras con CSS son complicadas, Hay frameworks que te ayudan a hacerlo fácil. Aqui hay unos cuantos por si gustas echarles un vistazo. Usar un framework es solo una buena idea si hace lo que quieres que tu sitio haga. No son un sustituto para saber como funciona el CSS." +frameworks.1: "Debido a que las estructuras con CSS son complicadas, hay frameworks que te ayudan a hacerlo fácil. Aquí hay unos cuantos por si gustas echarles un vistazo. Usar un framework es solo una buena idea si hace lo que quieres que tu sitio haga. No son un sustituto para saber como funciona el CSS." frameworks.2: "¡Y eso es todo! ¡Si tienes comentarios acerca de este sitio, házmelo saber en Twitter!" about.title: "Acerca de este sitio" diff --git a/translations/fa.yaml b/translations/fa.yaml index 103b546..35d141e 100644 --- a/translations/fa.yaml +++ b/translations/fa.yaml @@ -1,5 +1,7 @@ # Farsi/Persian +rtl: true + global.title: "یادگیری پیکربندی با CSS" global.short_title: "CSS" global.home: "خانه" diff --git a/translations/it.yaml b/translations/it.yaml index a961d2e..eb45b64 100644 --- a/translations/it.yaml +++ b/translations/it.yaml @@ -97,7 +97,7 @@ float.1: "Un'altra proprietà css utilizzata per impaginare è floatclear è importate per controllare il comportamento dei float." +clear.1: "La proprietà clear è importante per controllare il comportamento dei float." clear.2: "In questo caso, section in realtà si trova dopo il div. Tuttavia, dato che div sta flottando a sinistra, ecco cosa accade: il testo in section si disponde attorno a div e section circonda il tutto. E se volessimo far comparire section dopo l'elemento flottante?" clear.3: "Usando clear abbiamo spostato adesso questa sezione al di sotto del div flottante. Usa il valore left per sgomberare gli elementi flottanti a sinistra. Puoi anche usare right e both" diff --git a/translations/ja.yaml b/translations/ja.yaml index ae02875..69c9daa 100644 --- a/translations/ja.yaml +++ b/translations/ja.yaml @@ -61,12 +61,12 @@ box_sizing.simple: "さあ、私たちは同じサイズになった！" box_sizing.fancy: "やったー!" box_sizing.2: "これはかなりいい。だから、自分のページ内の全要素に対して、この設定を適用したいと考える人が現れてもおかしくはない。そんな人は、以下のようなCSSを書くと良い:" box_sizing.3: "これでページ内の全要素に対して、いつでも直感的にサイズ指定できるようになった。" -box_sizing.4: "box-sizingはとても新しいプロパティだ。だから、今のところ、例に示したような-webkit-や-moz-といったプレフィックスを使った方が良い。プレフィックスを使う事で、ブラウザ独自の実験的フィーチャーを利用することができる。また、IE8+の存在についても忘れるてはならない。" +box_sizing.4: "box-sizingはとても新しいプロパティだ。だから、今のところ、例に示したような-webkit-や-moz-といったプレフィックスを使った方が良い。プレフィックスを使う事で、ブラウザ独自の実験的フィーチャーを利用することができる。また、IE8+の存在についても忘れてはならない。" position.title: "position" position.intro: "さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。" position.static.title: "static" -position.static.1: "static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる" +position.static.1: "static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。" position.relative.title: "relative" position.relative.1: "余分なプロパティを設定しなければ、relativeはstaticと同等だ。" position.relative.2: "top、right、bottom、leftプロパティを、relativeな要素に対して設定する。すると、元々の表示される予定だった位置からの相対位置に配置するように調整される。この調整により生じた左の隙間に、他のコンテンツが自動的に配置されることはない。" @@ -74,7 +74,7 @@ position.fixed.title: "fixed" position.fixed.1: "fiexdな要素は、viewportに対する相対位置で配置される。つまり、ページがスクロールされても、いつでも同じ場所に配置されるという事だ。relativeと同様に、top、right、bottomやleftプロパティが使われる。" position.fixed.2: "このページの右下の角にfixedな要素がある。既に君は気づいて、気づかないふりをしていたに違いない。だが、ここではそれに気づく許可をあげよう。これが適用しているCSSだ:" position.fixed.3: "fixedな要素は、relativeな要素と異なり、元々の表示位置からの調整により生じた隙間にも自動的に他のコンテンツが配置され得る。" -position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートをしかしていない。もっと詳しい状況を知りたければここを参照しよう。" +position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートしかしていない。もっと詳しい状況を知りたければここを参照しよう。" position.fixed.example: "Hello! まだ私のことは気にしないでね。" position.absolute.title: "absolute" position.absolute.1: "absoluteは最も扱いにくい。absoluteはfixedとほぼ同等である。だが、viewportからの相対位置の代わりに、位置指定有効かつ最も近い世代の祖先要素からの相対位置に配置されるという点が異なる。位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。 \"位置指定有効な\"要素はstatic以外のいずれかの値が指定された場合であったことを思い出してほしい。" @@ -168,4 +168,4 @@ frameworks.1: "CSSレイアウトはとても扱いづらい。だから、い frameworks.2: "以上だ! 何かフィードバックがあれば、Twitterで知らせてくれ!" about.title: "このサイトについて" -about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup." \ No newline at end of file +about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup." diff --git a/translations/nl.yaml b/translations/nl.yaml index 49c504d..f0d4572 100644 --- a/translations/nl.yaml +++ b/translations/nl.yaml @@ -27,7 +27,7 @@ no_layout.1: "Helemaal geen layout hebben is nagenoeg voldoende als het doel is no_layout.2: "Voordat we dit probleem gaan oplossen, laten we eerst eens aandachtig naar de belangrijke display property kijken." display.title: "de \"display\" property" -display.intro: "display is CSS's meest belangrijke property om controle op layout te hebben. Elk element heeft een standaard display waarde afhankelijk van welk type element het is. De standaard voor de meeste elementen is block of inline. Een block element is doorgaans aangemerkt als een block-level element. Een inline element daarentegen wordt altijd aangemerkt als inline element." +display.intro: "display is CSS's meest belangrijke property om controle over de layout te krijgen. Elk element heeft een standaard display waarde afhankelijk van welk type element het is. De standaard voor de meeste elementen is block of inline. Een block element is doorgaans aangemerkt als een block-level element. Een inline element daarentegen wordt altijd aangemerkt als inline element." display.block.title: "block" display.block: "div is het standaard block-level element. Een block-level element begint op een nieuwe regel en rekt uit zover het kan van links naar rechts. Andere bekende block-level elementen zijn p en form. Sinds HTML5 zijn daar bijvoorbeeld ook header, footer, section aan toegevoegd en zo zijn er nog meer." display.inline.title: "inline" @@ -164,8 +164,8 @@ flexbox.centering.title: "Centreren met Flexbox" flexbox.centering.1: "Eindelijk is het makkelijk om iets verticaal te centreren in CSS!" frameworks.title: "css frameworks" -frameworks.1: "Omdat CSS layout zo listig is, zijn er CSS frameworks beschikbaar om het eenvoudiger te maken. Hier zijn er een aantal als je ze wilt proberen. Het gebruik van een framework is alleen een goed idee als het doet wat je site moet gaan doen. Ze zijn niet een vervanger om te weten hoe CSS werkt." +frameworks.1: "Omdat CSS layout zo lastig is, zijn er CSS frameworks beschikbaar om het eenvoudiger te maken. Hier zijn er een aantal als je ze wilt proberen. Het gebruik van een framework is alleen een goed idee als het doet wat je site moet gaan doen. Ze zijn niet een vervanger om te weten hoe CSS werkt." frameworks.2: "Dit was het! Elke vorm van terugkoppeling over deze site kan je me laten weten via Twitter!" about.title: "over deze website" -about.credits: "Gedocumenteerd en ontwikkeld door Greg Smith. Design door Isaac Durazo. Wij werken bij Bocoup." \ No newline at end of file +about.credits: "Gedocumenteerd en ontwikkeld door Greg Smith. Design door Isaac Durazo. Wij werken bij Bocoup." diff --git a/translations/pt-br.yaml b/translations/pt-br.yaml index f8dba6b..acdc9f0 100644 --- a/translations/pt-br.yaml +++ b/translations/pt-br.yaml @@ -6,7 +6,7 @@ global.home: "Início" global.toc: "Sumário" global.next: "Próximo" global.previous: "Anterior" -global.feedback: "Errors / Sugestões" +global.feedback: "Erros / Sugestões" util.extra_credit: "bônus" util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit." diff --git a/translations/zh.yaml b/translations/zh.yaml index 55e982a..fcd6479 100644 --- a/translations/zh.yaml +++ b/translations/zh.yaml @@ -18,12 +18,12 @@ util.nav.5: "Directions" util.nav.6: "Contact" index.1: "本站教授的是现在广泛使用于网站布局领域的CSS基础。" -index.2: "我们假设你已经掌握了CSS的选择器、属性和值。并且你可能已经对布局有一知半解，虽然亲自去写的话还是会很恼火。如果你想要从头开始学习HTML和CSS，那么你可以看下这篇教程。否则，让我们看看我们是否可以让你在下一个项目少动些怒。" +index.2: "我们假设你已经掌握了CSS的选择器、属性和值。并且你可能已经对布局有一定了解，即使亲自去写的话还是会很苦恼。如果你想要从头开始学习HTML和CSS，那么你可以看下这篇教程。不然的话，让我们看看我们是否可以让你在下一个项目少一些烦恼。" index.translator: "由敏明君和sunnylost翻译" index.get_started: "开始" no_layout.title: "没有布局" -no_layout.1: "如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！" +no_layout.1: "如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。试着调整下浏览器窗口大小你就明白我的意思了！" no_layout.2: "在解决这个问题之前，我们需要了解一个很重要的属性： display " display.title: "\"display\"属性" @@ -36,13 +36,13 @@ display.inline.2: "像这样" display.inline.3: "包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。" display.none.title: "none" display.none.1: "另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。" -display.none.2: "它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。" +display.none.2: "它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。" display.other.title: "其他 display 值" -display.other: "还有很多的更有意思的 display 值，例如 list-item 和 table 。这里有一份详细的列表。之后我们会讨论下 inline-block 和 flex 。" -display.extra: "就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人工制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。" +display.other: "还有很多的更有意思的 display 值，例如 list-item 和 table 。这里有一份详细的列表。之后我们会讨论到 inline-block 和 flex 。" +display.extra: "就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。" margin_auto.title: "margin: auto;" -margin_auto.1: "设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。" +margin_auto.1: "设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。" margin_auto.2: "唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案..." max_width.title: "max-width" @@ -50,18 +50,18 @@ max_width.1: "在这种情况下使用 max-width 替代 width max_width.2: "顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。" box_model.title: "盒模型" -box_model.intro: "在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。" +box_model.intro: "在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。" box_model.simple: "我小一些..." box_model.fancy: "我比它大！" -box_model.outro: "以前有一个代代相传的解决方案是数学。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了..." +box_model.outro: "以前有一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了..." box_sizing.title: "box-sizing" -box_sizing.1: "经过了一代又一代人们意识到数学不好玩，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：" +box_sizing.1: "人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：" box_sizing.simple: "我们现在一样大小了！" box_sizing.fancy: "万岁！" box_sizing.2: "既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：" box_sizing.3: "这样可以确保所有的元素都会用这种更直观的方式排版。" -box_sizing.4: "既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。" +box_sizing.4: "不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。" position.title: "position" position.intro: "为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。" @@ -69,15 +69,15 @@ position.static.title: "static" position.static.1: " static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。" position.relative.title: "relative" position.relative.1: " relative 表现的和 static 一样，除非你添加了一些额外的属性。" -position.relative.2: "在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。" +position.relative.2: "在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。" position.fixed.title: "fixed" position.fixed.1: "一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。" position.fixed.2: "我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：" -position.fixed.3: "一个固定定位元素不会保留它原本在页面应有的空隙。" +position.fixed.3: "一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。" position.fixed.4: "令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案." position.fixed.example: "Hello！暂时不要太关注我哦。" position.absolute.title: "absolute" -position.absolute.1: " absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。" +position.absolute.1: " absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。" position.absolute.2: "这里有一个简单的例子：" position.absolute.relative: "这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。" position.absolute.absolute: "这个元素是绝对定位的。它相对于它的父元素定位。" @@ -85,8 +85,8 @@ position.absolute.3: "这部分比较难理解，但它是创造优秀布局所 position_example.title: "position例子" position_example.1: "通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局。" -position_example.section.1: " section s的 margin-left 样式确保了有足够的空间容纳 nav 元素。" -position_example.section.2: "注意当你调整浏览器窗口时发生了什么。效果很赞！" +position_example.section.1: " section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。" +position_example.section.2: "注意观察当你调整浏览器窗口时发生了什么。效果很赞！" position_example.2: "这个例子在容器比nav元素高的时候可以正常工作。如果容器比nav元素低，那么nav会溢出到容器的外面。之后我们会讨论下其他布局技术，它们都各有优劣。" position_example.footer: "如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！我在 body 上面加了 margin-bottom 。" @@ -107,7 +107,7 @@ clearfix.4: "让我们加入一些新的CSS样式：" clearfix.5: "现在再看看发生了什么：" clearfix.6: "好多了！" clearfix.7: "这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：" -clearfix.8: "有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。" +clearfix.8: "有些独特的浏览器需要“额外的关照”。清除浮动这潭 水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。" float_layout.title: "浮动布局例子" float_layout.1: "完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。" @@ -121,7 +121,7 @@ percent.layout.1: "你可以用百分比做布局，但是这需要更多的工 percent.layout.2: "当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。" media_queries.title: "媒体查询" -media_queries.1: "“响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！" +media_queries.1: "“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！" media_queries.2: "媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：" media_queries.3: "当你调整浏览器窗口大小时，布局比以前更酷了！" media_queries.4: "现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。" @@ -147,7 +147,7 @@ inline_block_layout.tada: "Tada!" column.title: "column" column.1: "这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：" -column.2: "CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 cloumn 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。" +column.2: "CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。" flexbox.title: "flexbox" flexbox.1: "新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。" @@ -164,8 +164,8 @@ flexbox.centering.title: "使用 Flexbox 的居中布局" flexbox.centering.1: "CSS里总算是有了一种简单的垂直居中布局的方法了！" frameworks.title: "css框架" -frameworks.1: "因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能契合你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。" +frameworks.1: "因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能满足你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。" frameworks.2: "到此为止！如果你对本站有任何反馈，请在Twitter上联系我！" about.title: "关于本站" -about.credits: "由Greg Smith撰写和构建，由Isaac Durazo设计。我们在Bocoup工作。" +about.credits: "由Greg Smith撰写和构建，由Isaac Durazo设计。我们为Bocoup工作。"