🐅 ⚕️ 🦋 ضع البلاط بكفاءة (Pro CSS ، SVG ، نقش وغير ذلك) ❄️ 🌜 🤳🏻

مقال ~~عن إصلاح الشقق~~ ، حول الاستخدام الفعال للموارد الرسومية للأجهزة الحديثة. من الساعات الذكية إلى التلفزيونات إلى الحائط.

حكاية كيفية إدراج صور مكررة في الخلفية في الصفحة ، بحيث يكون الجميع على ما يرام.

حسنا ، هل أنت مستعد للعب ..؟ ثم قاد

استهلالي

كانت هناك مهمة لإنشاء صفحة موقع مع صورة مكررة.

كيف سنقرر؟

المستوى 1 مبتذلة بدائية

تتمثل أسهل طريقة لاستخدام عدد كبير من أنواع الحروف في التقاط صورة الخلفية دفعة واحدة (غالبًا تنسيق png ، حيث يتم تعيينها افتراضيًا في Figma و Avocode) وتقليبها إلى الكتلة عبر صورة الخلفية ؛
(* حسنا ، أنت لست هكذا ، أيها القارئ الصغير؟)

body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }

إذا كان المطور أكثر خبرة قليلاً ، ويعرف أن jpg مضغوط ، كقاعدة عامة ، أفضل من png ، فإن الخلفية ستكون بتنسيق jpg.

المستوى 2 لا يهمني الأداء

إذا كان مصمم التخطيط لا يهتم بأداء الصفحة المطورة ، وهو يعلم أنه في هذا المكان يمكنك حفظ حركة مرور المستخدمين بشكل كبير ، يمكنه عزل النمط (الجزء المكرر من الخلفية) عن هذه الصورة ، إذا كنت محظوظًا.

إذا تم تنفيذ التخطيط في PhotoShop ، فيجب عليك قصه. لأنه يتم تعيين الخلفية من قبل عنصر لا ينفصل هناك.

مثال على أخذ خلفية متكررة من Avocode

في Figma ، يتم تنفيذ هذا أسهل قليلاً. على الرغم من أن ذلك يعتمد على كيفية قيام المصمم بإنشاء هذه الخلفية لك.

* من يريد اللعب ، سأترك مثالي للتنزيل.
في المثال ، هناك خياران مع أنماط png و svg ، والتي سيتم مناقشتها لاحقًا.

حسنًا ، الآن بدلاً من صورة خلفية كبيرة واحدة ، لدينا عنصر تجانب متكرر (CSS Tiling).

 body { background: url("bg.jpg"); }

أحسنت ، أحسنت. الآن ، بدلاً من (586 كيلو بايت) ، يأخذ المستخدم كل شيء من الخادم (~ 24 كيلو بايت) ؛ الربح!

المستوى 3 سوف أعصرك إلى الحد الأقصى

دعونا نفكر ، هل من الممكن تحسين الوضع بطريقة ما؟ حسنًا ، لكن الصورة ليست معقدة ، فربما يمكنك تجاوزها إلى ناقل؟

ثم اختبأ شيطان الإغراء.

تهدف إلى الأفضل ، ونحن في كثير من الأحيان يفسد الخير ويليام شكسبير

عندما لا يتم ذلك بعقلانية ، أو لا يتم ذلك على الإطلاق:

لديك نمط تكرار معقد. سوف يستغرق الأمر n ساعات لإعادة رسمه ، وإذا كنت تشدد أيضًا على المصمم من خلال هذه المهمة ، فستقل كارما بالتأكيد.
هناك ظلال أو عناصر غير واضحة في الصورة ، وأنت لا توافق على رفضها.

* هنا لا بد من شرح

إذا قمت بتصدير رسومات SVG ، لنفترض من Figma أو Illustrator ، لكنك لم ترمزها بنفسك في المحرر ، فمن المرجح أن يتم إدراج عناصر التمويه أو الظل في SVG بتنسيق base64 وهذا لن يؤدي إلى تحسين أدائك بأي شكل من الأشكال ، لأن هذا الملف ، في الواقع ، قد تزن أكثر من تنسيق JPG التناظرية.

دائما تحقق ما تقدمه لك. بالطبع ، يمكن أيضًا إنشاء بعض هذه العناصر باستخدام تعليمة برمجية باستخدام عامل تصفية العلامات ، والاستخدام ، والكائن ... ولكن للعمل معهم ، فإنك تحتاج إلى مهارة ضخمة ، وهذا أمر نادر الحدوث.

حسنًا ، دعنا ننشئ SVG ونرى ما سيحدث.

* من أجل نقاء التجربة ، لم يتم ضغط الصور المعروضة بواسطة أدوات مساعدة تابعة لجهات خارجية وحفظت بجودة 100٪ باستخدام PhotoShop و Illustrator و Avocode.

حسنًا ، لدينا svg أقل من jpg / png من الإصدار الأصلي.

هذا ليس مفاجئًا ، لأننا تركنا فيه فقط الألوان الأساسية التي رأيناها ، وليس تلك التي تظهر عند تقاطع الأشياء مع التمويه.

لا يبدو الفرق بين أحجام ملفات png / jpg مهمًا للغاية ، ويبدأ في لعب دور فقط إذا كانت الصورة كبيرة.

* أفضل png ، واضبط لون الخلفية على خاصية لون الخلفية ، ولكن هذا من المهمة.

لقد كنت مرتبكًا إلى حد ما من أن ملف png / jpg الناتج من svg كان أصغر من حجم SVG (حتى تم مسحه من نظام البيانات المهملة (pattern-bg_cleared.svg) باستخدام SVGO )

لكن بعد ذلك ، بدا لي أنه إذا أردت تقليل / زيادة حجم خلفية الخلفية للجوال أو أجهزة التلفاز ، فإن هذا سيتطلب توصيل أنماط جديدة (pattern-bg_min) وستظل SVG كما هي (15 كيلو بايت - دائمًا) ، ولن يكون هناك أي تشويش هناك

يعد هذا إضافة هامة ، خاصةً إذا شاهد المستخدم الصفحة من هاتف باهظ التكلفة ذو دقة جيدة ، وقام مصمم التخطيط ، لصالح Google Page Speed ، بلصق جميع الرسومات قبل ظهور ابن آوى. هنا يتم توفير =)

 body { background-image: url(picture.svg); }

يبدو مألوفا جدا.

حسنا ، تعقيد. افترض الأنماط التي سيضمها الجسم في CSS الحرج ، ثم دعنا نجعل المتجه مباشرة في الأنماط. * حتى لا تتناثر في الصفحة ، سآخذ نمطًا مختلفًا ، أصغر.

 body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }

كان هناك الكثير من CSS وتوقف عن العمل

لذا ، من الضروري الآن ترميز كل هذا بشكل صحيح. لا يتم دعم إدراج SVG غير المشفر إلا من خلال متصفحات Webkit. شكرًا لك ، Julia Bukhvalova ، على مورد ترميز مفيد سيساعدنا في ذلك.

 body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }

أمثلة على التوضيح ، كيف يمكن تغليف SVG في CSS.

المؤشر هو SVG

يبدو أن كل شيء على ما يرام ، لكنني متأكد من أنني سوف أستخدم هذا النمط في جميع صفحات موقعي؟ بالتأكيد يجب أن يتم اقتحام CSS الحرج ، أو ربما سيكون أكثر صحة في المعتاد - المكون الإضافي CSS ونأمل أن يقوم المتصفح بتخزينه مؤقتًا؟ ربما كل نفس ، يمكنك توصيله فقط لصفحات معينة؟ قال شخص ذكي إن الكود الموضوعة في HTML يتم جمعه بواسطة المستعرض بشكل أسرع وله أولوية أعلى من حيث سرعة التجسيد. الكثير من الأسئلة ... عليك أن تجرب.

المستوى 4 سوف أعصر كل العصائر منك

أولاً ، سنقوم بإنشاء عنصر svg سيكون له ارتفاع وعرض 100٪ من الوحدة الخارجية بحيث يشغل أي حاوية نضعها فيه.

 <svg width="100%" height="100%"> </svg>

لإنشاء نمط ، نحتاج إلى وضعه في علامة تعريف svg defs (التعريف) ، على سبيل المثال مثل هذا:

 <svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>

بالفعل ليس سيئًا ، فأنت بحاجة إلى إضافة سمات يمكننا من خلالها التفاعل مع النموذج والاتصال به بطريقة أو بأخرى.

 <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>

سنقدم له معرفًا حتى يمكن الرجوع إليه لاحقًا ، وسنشير أيضًا إلى إحداثيات البدء لمرجع X و Y ، حيث عرضنا وارتفاعه في محرر الرسومات ، وحدد نطاق ViewBox (يمكنك أخذه من svg النهائي)

قليلا من الموضوع ، حول ViewBox

أعجبتني حقًا مثال التصور الخاص بتطوير وإحداثيات ViewBox SVG بواسطة Amelia Wattenberger https://wattenberger.com/guide/scaling-svg

... وقم بتعيين سمة patternUnits إلى userSpaceOnUse (هذا يحدد نظام الإحداثيات ، والذي يمكنك معرفة المزيد حوله في MDN )

باختصار ، باستخدام patternUnits = "userSpaceOnUse" ، يتم ملء الشكل الموجود على قماش SVG بالكامل ببلاطات النقش. إذا لم يكن البلاط الأخير مناسبًا تمامًا للطول أو العرض ، فسيتم قصه.

الآن نحن بحاجة إلى اتخاذ قرار بشأن الصورة التي سوف تتكرر

 <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>

كل شيء جاهز تقريبًا ، يبقى أن نسمي نمطنا على كائن معين ، حسنًا ، على سبيل المثال ، قم بإنشاء منطقة مستطيلة لملء الفراغ.

 <svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>

يمكنك أن ترى أن سمة التعبئة (التي تحتوي عادة على لون التعبئة تشير الآن إلى عنوان URL يحتوي على معرف النموذج المحدد حديثًا: fill = "url (# pattern-bg)".

يحتل نمطنا المتكرر كل المساحة المعروضة ، لكنني أود أيضًا أن يرتفع كل شيء في الارتفاع. للقيام بذلك ، لف svg لدينا في مع ارتفاع الارتفاع: 100vh ؛

 <div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>

قيّمها جيدة بالطبع ، في العلامة يجب أن تحاول إدراج صورك الأكثر خطورة ، لكنني أشرت إليك في الاتجاه الصحيح.

تتيح لك طريقة الإدراج هذه ، على عكس الطريقة من خلال الخلفية ، التحكم في تفاصيل عناصر SVG. هناك حرية معينة لما يجب تقديمه للمستخدم وما هو غير ذلك. وإذا كانت هناك رغبة في التجربة وإضافة JS قليلاً ، فيمكنك أيضًا تحقيق التشكل (تغيير الأشكال).

فيما يتعلق بمشاكل هذه الطريقة لإدخال تجانب مكرر ، وجدت أنه لا توجد طريقة (جيدًا ، أو لم أستطع العثور عليها ، وأولئك الذين يعرفون سيكتبون في التعليقات) كيفية تغيير حجم التجانب عند تغيير حجم شاشة المتصفح. في الواقع ، تكون سمات العرض / الارتفاع لعلامة النمط مسؤولة عن ذلك ، لكن لا يمكنني الوصول إليهم من خلال CSS والوسائط ، حسنًا ، هناك دائمًا JS إذا كنت بحاجة حقًا إلى

غش أنا لا أعرف الرسومات ، ولكن أريد أن أتطرق الجميلة

إذا كنت لا تعرف ، لسبب ما ، كيفية رسم عنصر متكرر لنمط في محرر رسومي ، أو ليس لديك وقت لذلك. فيما يلي مواقع بها حلول جاهزة يشارك فيها الأشخاص الطيبون الأشياء الجيدة مع العالم.

* ملحق صغير (أين هو دون الاباحية في الوقت الحاضر)

https://svgporn.com/