مرحباً بكم سنتحدث اليوم عن إمكانيات المتصفح وما يمكنك القيام به للتأكد من أن مواقعك
لها مظهر متناسق، بغض النظر عن كيفية وصول الناس إليه. لذلك على الرغم من أن HTML5 يدفع جميع مطوري المستعرض حقًا إلى الوصول لتحقيق هذا الاتساق،
إلا أنهم يختلفون حقًا في طريقة العرض، والالتزام بالعلامات (الشعارات) الجديدة التي تظهر. وبما أن المتصفحات يتم تحديثها
وتتغير وتظهر متصفحات جديدة ،عليك أن تضع في الاعتبار أن ليس جميع الأشخاص
يشاهدون صفحتك بنفس الطريقة التي كنت.تشاهدها بها. لذا، تقع على كاهلك مسؤولية التأكد من أن
صفحتك تتناسب مع جمهور عريض. وبينما كنا نتحدث مرارًا عن إمكانية الوصول للمحتوى والطرق المختلفة للوصول إلى صفحة الويب،
فالأمر برمته يتلخص في أبسط تطبيقات المتصفح. لذا ، لنتحدث أولاً عن طريقة التعامل
مع هذه الاختلافات الأسلوبية. وأسهل طريقة للتخلص من اختلافات المتصفح هي أن تنشئ شيئًا يسمى ورقة التصميم الافتراضية. تمضي قدمًا في ورقة التصميم هذه، قم بمسح أي من إعدادات المتصفح الافتراضية
للعناصر المختلفة التي يتم تصميمها. لذا عندما تمضي قدمًا
وعندما تقوم بذلك ستأخذ P, H1, H2 كافة العناوين. وكل العلامات الدلالية المختلفة وستقول أريد أن تكون هناك حواشي صفرية، وهوامش صفرية. حتى عناصر القائمة الخاصة بي
لا ينبغي أن تحتوي على أي زخارف على الإطلاق. وهذا سيضمن لك أن يكون لديك مظهرًا متسقًا للغاية، ينبغي على أن أعترف أنه سيجعل صفحتك تبدو مروعة للغاية. لكن هذا هو الثمن الذي ستدفعه لكي يساعدك، عندما تبدأ في كتابة قواعد التصميم الخاصة بك، على تحسين و صفحتك حتمًا وستبدو بشكل أفضل. وإذا لم تقم باستخدام ما نسميه ورقة التصميم الافتراضية هذه، ستصمم صفحتك وسيكون من الصعب حقًا عليك أن تتذكر ما إذا كنت قد قمت بالفعل بالتحقق من كل عنصر تستخدمه. وإحدى الأشياء الأخرى التي نريد التحدث عنها هو التعامل مع ما نسميه الخصائص غير المدعومة. لذا أولًا، نعلم أن جميع المتصفحات لا تدعم جميع علامات HTML5. لقد رأيت هذا بالفعل، في بعض البرمجيات الذي قمت بها معي. وبنفس الطريقة، لا تدعم كافة المتصفحات جميع خصائص CSS3. هناك بعض الخصائص التي تبدو رائعة حقًا
في بعض المتصفحات، ولكن لا يتم التعامل معها بشكل افتراضي في المتصفحات الأخرى. ولكن هناك طريقة لتجاوز ذلك في الكثير من الحالات. وهو أن المتصفحات تقدم بادئات. لذا يطلقون عليها أحيانًا اسم بادئات المتصفح،
وأحيانًا أخرى بادئات البائعين، ولكن وأهم شئ هو أن هذا حل سريع حقًا من أجل التعامل مع كافة الخيارات غير المدعومة التي قد تصادفك. والآن، عندما رأيت بادئات المتصفح لأول مرة، شعرت بالهول. لم أكن أعرف ماذا يحدث ، وبدا الأمر غريبًا بعض الشيء، وكنت أشعر بالكسل و لم أرغب في التعامل مع هذا الأمر. لكني هنا لأخبركم، بأن استخدام هذه البادئات أمرًا في غاية السهولة. لذا، لنلقي نظرة على ما أتحدث عنه. لقد كنت تستخدم خصائصًا مختلفة ونأمل أن المتصفح يعمل توًا. ولكن الآن ، فيما يتعلق ببعض هذه الخصائص،
سيتعين عليك إضافة بادئة أو شئ أمامها قليلاً ، مثل webkit أو moz أو ms أو o لـ Opera. كل بادئة من هذه البادئات تشير إلى أنه
إذا كنت تستخدم هذا المتصفح المحدد، هذا هو ما أريدك أن تقوم به للحصول على - المظهر الذي يبحث عنه المصمم. إذًا، ما هي بعض هذه الخصائص التي غالبًا ما تكون غير مدعومة؟ وتشمل عدد الأعمدة ، وهي طريقة لإضافة عدة أعمدة إلى فقراتك أو أقسامك. إنها حقًا طريقة رائعة لتقسيم النص سريع الاستجابة. لذا إذا قام شخص ما بتغيير حجم الصفحة ،
فسيتم تغيير حجم الفقرات بالفعل. لدينا شيء آخر يطلق عليه نصف قطر الإطار، والذي يروق حقًا للناس استخدامه لأنه يضيف حافة مستديرة قليلاً إلى الإطارات الخاصة بعناصرك. وقد يكون الخيار الثالث التدرج. والتدرج هو نوع رائع جدًا من ألوان الخلفية التي تتيح للون الانتقال من ظل واحد من اللون الأزرق إلى الرمادي أو الأحمر أو أي لون من هذا القبيل. ويعطيها مظهرًا مختلفًا. الآن لا توجد طريقة لمعرفة الخصائص المدعومة والخصائص غير المدعومة. لذا لدي هذا الرابط هنا ، موقع يسمى caniuse.com. وما يقوم به موقع caniuse.com هو أنه يسرد الخصائص المختلفة ويخبرك بالمتصفحات التي تدعمها وأيها تحتاج إلى البادئات. لذا، فالرجوع إلى هذا الموقع عند البدء في تطوير صفحتك يعد فكرة جيدة. لكن في الوقت الحالي، لنمضي قدمًا ونتدبر إحدى الأمثلة. ففي هذا المثال، لدي ملف باسم prefixes.html. أريد فقط أن أريكم سريعًا كيف يبدو كل من Chrome هنا ، وكذلك Safari. يبدوان متشابهان لحدٍّ ما ولكن هناك مسافات صغيرة حيث قد لا يتطابق الخط تمامًا، أو قد لا تتطابق بعض المسافات تمامًا. لذا إذا أردت التخلص من ذلك، إذا أردت حقًا التأكد من أن الصفحات تبدو متشابهة تمامًا، فما يمكنني فعله
هو إضافة ورقة تصميم افتراضية. فلننزل هنا، و سأقول مرحبًا ، أريد أن أستخدم ورقة التصميم الافتراضية الخاصة بي. ويبدو أنه ملف غريب حقًا حيث قمت بإدراج كل العناصر المختلفة. وبعد ذلك، ضع أشياءًا مثل، لا أريد أي حواشي، لا أريد أي هامش. إذا كانت لدي قوائم، تخلص من نمط القائمة. اجعل هذا حقًا مكروهًا بقدر استطاعتك. لذا إذا عدت إلى هنا، قد لا ترى فرقًا كبيرًا لأن المتصفحات و واضحة جدًا بالفعل، لكن يمكنك رؤية أشياءًا تتحرك بعض الشئ. نتخلص من بعض الأشياء. وبنفس الطريقة، عندما أقوم بتحديث Safari، سوف تبدو أمثر تشابهًا بعض الشئ. لنبدأ الآن ولنمضي قدمًا و انظر إلى هذا المثال حيث أن بعض الخصائص لا يتم دعمها. وسأعود إلى ملف HTML الخاص بي، وسأقول، مهلاً، أريد استخدام ورقة التصميم الخاصة بي لأمضي قدمًا
وأقوم بتصميم بعض الأشياء التي لا يتم دعمها دائمًا. والأشياء التي أتحدث عنها على وجه التحديد هي، أننا سنبدأ بـ - فكرة عدد الأعمدة. إن كيفية عد الأعمدة وفجوة الأعمدة هي أنك تخبر المتصفح بعدد الأعمدة التي تريدها ومقدار المسافة
التي تريدها أن تكون بين تلك الأعمدة. والآن، عندما أقوم بالتحديث،
يمكنك أن ترى أنها تحولت من كونها فقرة واحدة طويلة نوعا ما إلى شئ انفصل فيه كل شئ. وهو رائع حقًا لأنه ديناميكي. إذا قمت بتغيير حجم المتصفح،
فسوف يتحرك كل شئ حوله. وهذه طريقة رائعة حقًا للقيام بذلك. إحدى الأشياء الأخرى التي أود إضافتها
فقط كشيء ينبغي وضعه في الاعتبار، هي فكرة تكمن في أنه بدلاً من وجود مربع ،
أريد round تقريب الحواف قليلاً. لذلك يمكنك القيام بذلك عن طريق إضافة
ما يسمى نصف قطر الإطار. الآن سأتوقف قبل أن أقوم بتحديث الصفحة،
لأنني أريد أن أشير إلى شيء ما لك في حالة إذا ما كان ينتابك الخوف عندما قمت بذلك لأول مرة. إن نصف قطر الإطار
هو مجرد خاصية بسيطة كانت موجودة منذ فترة. ويمكنك أن تراها هنا، أو تعطيها قيمة. ونفس الشئ يحدث مع عدد الأعمدة والفجوة الموجودة بينهم. إن فكرة إضافة البادئات تعني فقط ، خذ ما يهمك و وضع هذه البادئات عليها. لا تحتاج إلى تعلم أي شيء جديد،
ما عليك سوى تذكر أسماء البادئة. ولذا أريدك حقًا القيام بهذا، وإدراك أنك وإدراك أنك لا تفعل شيئًا مذهلاً للغاية. والآن بعد أن فعلت هذا، جعلتها 25. وسأمضي قدمًا، وسأقوم بتحديثه. وكما ترون، لقد قمت نوعًا ما
بحني الحواف المختلفة حول الجانب، وهو أمر رائع. آخر ما سأفعله هو إضافة تدرج للون. الآن أختار لون أزرق ثابت. ومن المهم أنه بغض النظر عن لون الخلفية، الذي ترغب في استخدامه،
هو أن التدرج اللوني لا يحدث. لكن الآن بالنسبة للتدرج الخطي،
فأنت ببساطة تعطي لونين ترغب في رؤيتهما وتقول كم تريد في البداية والنهاية. مرة أخرى، لدي اللون الأزرق العادي. والآن عندما أقوم بالتحديث،
أنتقل من اللون الأزرق إلى الرمادي الفاتح. هذا رائع وله الكثير من الأكواد ومن الممتع جدًا التعامل معه. لذلك أريد أن أذكرك أنه عندما تطور من نفسك،
لا تحاول الاحتفاظ بالأشياء. لا تحاول أن تتذكر كيف تفعل كل شيء. سأضغط بزر الماوس الأيمن هنا، وأقوم بفحص العنصر. لأنك إذا قررت لاحقًا أن هذا منحنى كبير، أو أنه لا يعجبك هذا اللون، فما لا تريده هو الكتابة،
والحفظ، والتحديث، والكتابة، والحفظ، والتحديث. سيكون الأمر حقًا مملاً. لذا بدلاً من ذلك، سأذهب إلى القسم الخاص بي وأمعن النظر، ويمكنك أن ترى في عنصر الفحص أنني لم أستخدم بادئة moz و لم أستخدم بادئة Opera ،
لأنني لم أكن بحاجة إلى ذلك. فأنا أستخدم Chrome. ما يمكنني فعله هو النزول هنا إلى نصف قطر الإطار وتغييره. بدلاً من 25 بكسل،
إذا كنت أريد أقل من منحنى a ، يمكنني جعله 5 بكسل. يمكنك أن ترى ذلك يحدث في الوقت الحقيقي. يمكنك جعله 50 بكسل.ولكن سيكون غريبًا. يمكنك أيضًا استخدام النسب المئوية إن أحببت ذلك. لذا فأنا أمضي قدمًا وأضع 15٪.. لذا فمن الممكن التعامل ديناميكيًا مع هذه الأشياء وبعد ذلك بمجرد حصولك على القيمة التي تعجبك حقًا،
قم بنسها ووضعها في ملف CSS الخاص بك. لذا فإن بادئات المتصفح هي مجرد شئ
يمكنك أنت تشعر بالمتعة في التعامل معه. وقد يكون مخيبًا للاّمال. لكن الشيء الأكثر أهمية
هو أنك ينبغي عليك أن تدرك أنه واضح جدًا. وإحدى الأشياء التي قد تفعلها عندما تضيف البادئات هو الإدراك، أسهل شيء تفعله في الوقت الحالي هو إضافة تلك البادئات يدويًا. قم بوضع نصف قطر الإطار في المكان الذي تريده. ثم ادخل وضف webkit ، moz ،
وأشياء أخرى من هذا القبيل. عندما تبدأ في استخدام البادئات، ما ستفعله هو أنك ستضيفها يدويًا. إن كنت تعلم أن لديك نصف قطر الإطار،
ستمضي قدمًا وتقوم بتصميم أنصاف أقطار إطاراتك. ثم أضف moz ، webkit ، وأشياء مختلفة من هذا القبيل يدويًا. عندما تصبح أكثر خبرة وربما تريد أن تجرب أشياءً مختلفة ، هناك طرق لأتمتة إضافة هذه البادئات. إذا كنت تستخدم محررًا مثل Sublime ، يمكنك في واقع الأمر وضع حزم صغيرة
حيث يمكنك التحكم في ما إذا كنت تريد إضافة Sublime
إلى هذه الحزم أم لا كلما رأوا خصائصًا مختلفة. يمكنك أيضًا استخدام البرامج الخارجية التي ستغير ترميزك ديناميكيًا حيث يقوم الأشخاص بتحميله لوضع في البادئات التي يحتاجون إليها فقط. إذا كنت تتذكر في المثال الذي ضربته،
على الرغم من أنني كنت أستخدم Chrome، لا تزال ورقة التصميم الخاصة بي تحتوي على جميع البادئات المختلفة. سيؤدي هذا تلقائيًا إلى إضافة ما تحتاج إليه فقط. مرة أخرى، هذا رائع إلى حد ما ،
لكن، دعنا لا ننشغل بشأنهم الآن. والاّن دعنا نركز على الأساسيات. لذا للمراجعة، عند بدء الترميز، عندما تبدأ في إنشاء أوراق التصميم، ينبغي عليك أن في التفكير في استخدام ورقة تصميم افتراضية
لإزالة تلك الاختلافات الأسلوبية. وعندما تفعل ذلك، أريدك أن تفكر في بعض الأشياء. ذًا، أولاً، هل ينبغي أن تكون ورقة التصميم الافتراضية داخلية أم خارجية؟ وأتمنى أن تكونوا جميعا قد قلتم خارجيًا. حيث أنها إذا كانت داخليه، ستؤثر على كافة الأشياء الأخرى التي اجتهدت في القيام بها. وبالطريقة نفسها، عندما تضع رابطًا
في ورقة التصميم الافتراضية الخاصة بك، تأكد من أنها تم وضعها أولاً. حيث أن طريقة عمل المتصفحات هي
: ورقة التصميم ، ثم ورقة التصميم، ثم ورقة التصميم. فإذا وضعت ملفك أولاً ثم ورقة الأنماط الافتراضية، سيتم تداخل كل شيء في بعضه. رائع الذي قمت به حتى الآن. أخيرًا، تذكر أن بادئات المتصفح يمكن أن تساعد في إزالة بعض الاختلافات الناتجة
عن الخيارات غير المدعومة. ولكنك ألا تقوم بالإفراط في استخدامها. لا تضع بادئة على كل خاصية لمجرد أنك غير متأكد. وبدلاً من ذلك، عليك الذهاب إلى تلك المواقع
، مثل حيث يمكنك استخدامها واختبارها و قم حقًا بتفكير مدروس حول ما إذا كنت تريد استخدامها أم لا. أنت تذهب حقًا بعيدًا حول فكرة تطوير الويب بأكملها. كما نأمل أن تقوم بتصميم بعض الصفحات الرائعة حقًا. وأريدك أن تكون قادرًا على
استخدام جميع الخصائص المختلفة الموجودة هناك. لذلك لا تخف من فكرة اضطرارك
إلى استخدام أوراق التصميم التي التي لم تكتبها، أو من أنك ينبغي عليك استخدام بادئات المتصفح. لقد فهمت هذا تمامًا وأنا علي يقين
بأنه بإمكانك البرمجة باستخدام هذه الأدوات المختلفة. لذلك، حظاً طيباً.