نتائج البحث

اذهب إلى التنقل اذهب إلى البحث

CSS/Topics/Data Type

نوع البيانات الوصف angle نوع البيانات <angle> في CSS يستعمل لتمثيل القيم الزاويّة بالدرجات (degrees) أو بالغراد (grad) أو بالراديان (radians) أو بالدورات (turns)، ويمكن استخدام هذا النوع في التدرجات اللونية <gradient> وبعض دوالtransform. blend-mode نوع البيانات <blend-mode> في CSS يستعمل لوصف كيف يجب أن تمتزج الألوان عند تداخل طبقات الخلفات مع بعضها بعضًا. فلكل بكسل من بكسلات الطبقة التي طُبِّق عليها نمط الامتزاج، فسيأخذ اللون من الخلفية ومن الأمامية، وستُجرى عملية حسابية عليه، ويُعاد لونٌ جديدٌ سيستخدم مكان تداخل الطبقات. color value نوع البيانات <color> في CSS ...

أنواع البيانات (Data Types) في Kotlin

إن كلَّ عنصرٍ في Kotlin يعد كائنًا إذ يمكن استدعاء الدوال (member functions) والخاصّيّات (properties) عبر أي متغيِّر (variable)، ولبعض الأنواع تمثيلها الداخلي الخاص بها؛ فعلى سبيل المثال تُمثَّل الأعداد والمحارف والقيم المنطقية (boolean) كقيمٍ أساسيّةٍ أثناء التشغيل (runtime) ولكنها بالنسبة للمستخدم مجرّد أصنافٍ عادية، وتناقش هذه الصفحة الأنواع الرئيسيّة للبيانات في Kotlin وهي: الأعداد، والمحارف، والقيم المنطقية (boolean)، والمصفوفات، والسلاسل النصيّة. الأعداد (Numbers) تتعامل لغة Kotlin مع البيانات العدديّة بطريقةٍ مماثلةٍ للغة Java ولكن بفوارق بسيطة، فلا تدعم مثلًا ...

الصنف ‎:first-of-type

الصنف الزائف ‎:first-of-type في CSS (أي pseudo-class) يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة. p:first-of-type { color: red; } ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد: :first-of-type أمثلة لاحظ كيف ستُنسَّق أوّل فقرة <p> من بين العناصر الأخوة: <h2>الترويسة</h2> <p>النص 1</p> <p>النص 2</p> شيفرة CSS: p:first-of-type { color: red; font-style: italic; } لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، ...

الصنف ‎:last-of-type

الصنف الزائف ‎:last-of-type في CSS (أي pseudo-class) يُمثِّل آخر عنصر من نوعه في مجموعة من العناصر الأخوة. p:last-of-type { color: lime; } ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد: :last-of-type أمثلة لاحظ كيف ستُنسَّق آخر فقرة <p> من بين العناصر الأخوة: <h2>الترويسة</h2> <p>النص 1</p> <p>النص 2</p> شيفرة CSS: p:last-of-type { color: red; font-style: italic; } لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، ...

الصنف :nth-of-type()

الصنف الزائف ‎:nth-of-type()‎ في CSS (أي pseudo-class) يُطابِق عنصرًا أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings). هذا المُحدِّد يُحدِّد جميع عناصر <p> التي ترتيبها هو الرابع ضمن أي مجموعة من الأخوة: p:nth-of-type(4n) { color: lime; } يقبل هذا الصنف الزائف وسيطًا واحدًا يمُثِّل نمط مُطابقة العناصر: الكلمة المحجوزة odd تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية. الكلمة المحجوزة even تُمثِّل ...

تنظيم البيانات (Organizing Data)

تساعد تقنيات إعادة التصميم هذه بالتعامل مع البيانات، وتبديل أصناف ذات وظائف كثيرة مكان الأنواع الأساسية (primitives). نتيجة أخرى مهمة نحصل عليها بتطبيق هذه التقنيات هي فك ارتباطات صنف مما يجعل الصنف قابلًا للنقل وإعادة الاستعمال. وهذه التقنيات هي: التغليف الداخلي للحقول (Self Encapsulate Fields) المشكلة: الوصول المباشر إلى الحقول الخاصّة داخل الصنف. الحل: إنشاء تابعي الجلب (getter) والضبط (setter) للحقل الخاصّ ومنع الوصول إليه إلا عبرهما. تبديل قيم البيانات إلى كائنات (Replace Data Values with Objects) المشكلة: وجود حقلٍ ...

الخاصية list-style-type

الخاصية list-style-type في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة. بطاقة الخاصية القيمة الابتدائية disc تُطبَّق على عناصر القوائم. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* قائمة مختصرة بأنواع الأشكال */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: arabic-indic; /* <string> */ list-style-type: '-'; /* @counter-style rule */ list-style-type: custom-counter-style; list-style-type: none; /* القيم العامة */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن العنصر <li> افتراضيًا؛ لكن لاحظ أنَّ قيمة ...

الصنف ‎:nth-last-of-type()‎

الصنف الزائف ‎:nth-last-of-type()‎ في CSS (أي pseudo-class) يُطابِق عنصرًا أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings). بدءًا من النهاية إلى البداية. هذا المُحدِّد يُحدِّد جميع عناصر <p> التي ترتيبها هو الرابع ضمن أي مجموعة من الأخوة، والعد يبدأ من النهاية: p:nth-last-of-type(4n) { color: lime; } ملاحظة: هذا الصنف الزائف يماثل الصنف ‎:nth-of-type إلا أنه يبدأ عدّ العناصر من النهاية إلى البداية، عكس الصنف ‎:nth-of-type الذي يبدأ العد من البداية إلى النهاية. رجع صفحة الصنف ...

المحدد ‎‎‎:nth-of-type()‎‎ في jQuery

المحدد ()‎:nth-of-type الوصف يختار هذا المحدِّد عناصر ذات موقع محدد ضمن مجموعة من العناصر الأخوة (أي جميعها أبناء لعناصر أخرى) التي لها اسم العنصر ذاته. jQuery( ":nth-of-type(index/even/odd/equation)" )‎ أُضيف مع الإصدار: 1.9. index فهرس العنصر الابن المراد مطابقته، ويبدأ العد من القيمة 1 بدءًا من بداية المجموعة (أي فهرس أول عنصر في المجموعة هو 1). ويمكن استعمال الكلمة المحجوزة even التي تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أو الكلمة المحجوزة odd التي تُمثِّل العناصر التي يكون ترتيبها بين ...

CSS/Topics/List

الخاصية الوصف counter-increment تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset. counter-reset تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، ويمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment. list-style الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصياتlist-style-type و list-style-image و list-style-position. list-style-image تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. من المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية. list-style-position تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style. list-style-type ...

دوال التوقيت في CSS

نوع البيانات <timing-function> يشير إلى الدوال الرياضية التي تصف سرعة تغيير القيم أحادية البعد في الحركات، وهذا ما يسمح بتغيير سرعة الحركات خلال فترة الحركة. دوال الحركة السلسة تُنشِئ علاقة نسبية بين الوقت والناتج، وتكون القيمتان رقميتين <number>، وتُمثِّل القيمة 0.0 الحالة الابتدائية والقيمة 1.0 الحالة النهائية. دالة توقيت لها مخرجات أكبر من 1. دالة توقيت لها مخرجات أكبر 1 لكنها مقصوصة. اعتمادًا على الدالة المُستخدمة، قد يصبح الناتج في بعض الأحيان أكبر من 1.0 أو أصغر من 0.0 أثناء ...

Python/types

تقدّم هذه الوحدة عددًا من الدوال المساعدة لإنشاء أنواع بيانات جديدة بصورة ديناميكية، إضافة إلى أنّها تعرّف أسماءً لبعض أنواع الكائنات التي يستخدمها مفسّر بايثون المعياري، ولكنّها ليست كائنات داخلية مثل int أو str، إلى جانب أنّ هذه الوحدة تقدم بعض الأصناف والدوال المساعدة الخاصة ببعض الأنواع، والتي لا تعدّ أساسية بما يكفي لتصبح أصنافًا ودوالّ داخلية. إنشاء الأنواع ديناميكيًا تقدّم هذه الوحدة ثلاث دوالّ تساعد في إنشاء أنواع البيانات ديناميكيًا: الدالة types.new_class()‎‎ تنشئ هذه الدالة ديناميكيًا كائن صنف باستخدام ...

CSS/Topics/Selectors

الخاصية الوصف محددات الأنواع مُحدِّد النوع (type selector) في CSS يُطابِق العناصر وفق اسم العقدة، أي أنه يُحدِّد جميع العناصر التي لها نوع معيّن في المستند. محددات الأصناف مُحدِّد الصنف (class selector) في CSS يُطابِق العناصر وفق قيمة الخاصية class التابعة لها. محددات المُعرِّفات مُحدِّد المُعرِّف (ID selector) في CSS يُطابِق العناصر وفق قيمة الخاصية ID التابعة لها. المحدد العام المُحدِّد العام (universal selector) في CSS يطابق جميع العناصر. محددات الخاصيات مُحدِّد الخاصيات (attribute selector) في CSS يُطابِق العناصر إذ ...

الصنف Data في روبي

الصنف Data هو صنف مهمل. كان يعدُّ الصنف الأساس لملحقات C التي تستعمل Data_Make_Struct أو Data_Wrap_Struct. مصادر صفحة الصنف Data في توثيق روبي الرسمي.

التابع ‎.data()‎ في jQuery

يخزِّن التابع ‎.data()‎ بيانات عشوائية مرتبطة بالعناصر المتطابقة أو تُعيد القيمة في مخزن البيانات المحدد للعنصر الأول في مجموعة العناصر المتطابقة. ‎.data( key, value )‎ القيمة المعادة يعيد التابع ‎.data()‎ كائنًا من النوع jQuery. الوصف يُخزن بيانات عشوائية مرتبطة بالعناصر المتطابقة. ‎.data( key, value )‎ أُضيفت مع الإصدار: 1.2.3. key سلسلة نصية مُنشَأة من الكائن String تشير إلى جزء من البيانات المراد تعيينه. value قيمة البيانات الجديدة، ويمكن أن تكون من أي نوع من أنواع JavaScript ما عدا القيمة undefined. ...

المحدد ‎‎‎:nth-last-of-type()‎‎ في jQuery

المحدد ()‎:nth-last-of-type الوصف يختار هذا المحدِّد عناصر ذات موقع محدَّد ضمن مجموعة من العناصر الأخوة (أي جميعها أبناء لعناصر أخرى) التي لها اسم العنصر ذاته وذلك بدءًا من نهاية المجموعة وحتى بدايتها. jQuery( ":nth-last-of-type(index/even/odd/equation)" )‎ أُضيف مع الإصدار: 1.9. index فهرس العنصر الابن المراد مطابقته، ويبدأ العد من القيمة 1 بدءًا من نهاية المجموعة (أي فهرس آخر عنصر في المجموعة هو 1). ويمكن استعمال الكلمة المحجوزة even التي تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أو الكلمة المحجوزة odd ...

CSS/Topics/Pseudo Classes

الصنف التمثيل ‎:active العناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر. ‎:checked أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر<select> تم تحديدها أو انتقاؤها. يمكن أن يُفعِّل المستخدم هذه الحالة بتفعيل أو انتقاء العنصر. ‎:default أي عنصر مُختار افتراضيًا بين مجموعة من العناصر المتعلقة به؛ ويمكن استخدام هذا الصنف الزائف على أيّة أزرار عادية <button> أو أزرار انتقاء (radio button) ...

الدالة type()‎ في بايثون

تعيد الدّالة type()‎ نوع الكائن المُعطى إن مُرّر مُعامل واحد لها. وتعيد كائن نوعٍ (type object) جديد إن مُرّرت لها ثلاثة مُعاملات. البنية العامة type(object) type(name, bases, dict) المعاملات تقبل الدّالة type()‎ إمّا مُعاملًا واحدًا فقط، أو ثلاثة مُعاملات كما هو واضح في البنية العامّة أعلاه. عند استدعائها بمُعامل واحد فقط، ستُعيد الدّالة نوع الكائن المُمرّر. أمّا عند الاستدعاء بثلاثة مُعاملات، فسيُعاد كائن نوعٍ جديد. وهو طريقة ديناميكيّة لإنشاء الأصناف كبديل للجملة class. object عند استدعائها بمُعامل واحد فقط، يُمثّل هذا ...

أصناف البيانات (Data Classes)

توصيف المشكلة وجود العديد من أصناف البيانات في الشيفرة، والتي تُستخدَم لتخزين البيانات التي تحتاج إليها الأصناف الأخرى، إذ تحتوي على حقولٍ للبيانات (fields) وتوابع للوصول إليها (accessors) أي توابعَ للحصول على بيانات الحقول (getter) وأخرى لتعديلها (setter)، ولا تقوم هذه الأصناف بأيّ مهمّة أخرى ولا تستطيع كذلك تنفيذ العمليات (operations) على بياناتها بمفردها. أسبابها من الطبيعي أن يحتوي الصنف -بادئ الأمر- على القليل من الحقول العامّة (public fields) وبعض التوابع للوصول إليها (accessors) ولكن إن استمرَّ الصنف كذلك فلن ...

البيانات المُجمَّعة (Data Clumps)

توصيف المشكلة تكرار مجموعةٍ من المتغيِّرات (variables) (كتلك المُستخدَمة كمعاملاتٍ [parameters] للربط مع قاعدة البيانات مثلًا) بشكلٍ متطابقٍ تمامًا في عدّة أجزاء من الشيفرة، إذ يجب تحويل تلك المجموعات إلى أصنافها (classes) الخاصّة بها. أسبابها تُعزى المشكلة عمومًا للبُنية (structure) البرمجيّة الضعيفة (أو ما يُعرف بمصطلح copypasta programming)، وللتحقُّقِ من وجود هذه المشكلة بالشيفرة احذف إحدى القيم، فإنْ حدث خللٌ نتيجة الحذف فالمشكلة قائمة ويجب علاجها، وإلّا فتلك إشارةٌ حسنةٌ ومن المحبَّذ تجميعُ هذه المتغيِّرات في كائنٍ واحدٍ. وما الحل؟ ...

Document.createProcessingInstruction()‎

يُنشئ التّابع Document.createProcessingInstruction()‎ عقدةَ إرشادِ مُعالجة (processing instruction node) جديدةً ويُعيدها. البنية العامة Processing_instruction_node = document.createProcessingInstruction(target, data) المعاملات Processing_instruction_node عقدةٌ من النّوع ProcessingInstruction. target يُشير إلى جزء الهدف في عقدة إرشاد المعالجة، ‎<?‎target ... ?‎>‎ مثلًا. data سلسلةٌ نصيّة تحتوي على البيانات المرغوب إضافتها إلى البيانات داخل العقدة. الاستثناءات NOT_SUPPORTED_ERR يُرمى في حال لم يدعم المُتصفّح هذا التّابع (إصدارات أقدم من Firefox 9 مثلًا). DOM_INVALID_CHARACTER يُرمى عند مُحاولة إضافة هدف إرشاد مُعالجةٍ غير صالح (يجب أن يكون اسم XML أو الأحرف ...

الدالة attr()‎

الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل. /* استخدام بسيط */ attr(data-count); attr(title); /* تحديد نوع البيانات */ attr(src url); attr(data-count number); attr(data-width px); /* توفير قيمة افتراضية */ attr(data-count number, 0); attr(src url, ''); attr(data-width px, inherit); attr(data-something, 'default'); لاحظ أنَّ الدالة attr()‎ يمكن استخدامها مع أيّ خاصية CSS، لكن دعم استخدامها مع جميع الخاصيات باستثناء content ما يزال تجريبيًا. أمثلة لاحظ كيف خزّنا السلسلة النصية hello ...

CSS/Topics/Position

الخاصية الوصف bottom الخاصية bottom في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements). clear تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء. display تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم ...

التعامل مع CSS في jQuery

تعمل التوابع الموجودة في هذا القسم على جلب وضبط قيم خاصيات CSS لعنصر محدَّد (أو مجموعة عناصر محدَّدة). ‎.height()‎ يجلب هذا التابع الطول الحالي لأول عنصر في مجموعة العناصر المتطابقة أو يغير الطول لكل العناصر المتطابقة. ‎.innerHeight()‎ يعيد هذا التابع قيمة الطول الحالي (تتضمن قيمة الحواشي فقط دون الإطار) لأول عنصر في مجموعة العناصر المطابقة أو يغير الطول الداخلي لكل العناصر المطابقة. ‎.innerWidth()‎ يعيد هذا التابع قيمة العرض الحالي (تدخل قيمة الحواشي ضمنها فقط) لأول عنصر من مجموعة العناصر المطابقة ...

الخاصيات المخصصة في CSS

أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة var()‎. بطاقة الخاصية القيمة الابتدائية لا يوجد تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); أمثلة المثال الآتي يُعرِّف متغيرين ثم يستخدم قيمتهما في بقية المستند، لاحظ كيف ستُطبَّق قواعد الوراثة على الخاصيات المخصصة: <p id="firstParagraph">يجب أن تحتوي هذه الفقرة على خلفية ...

ملحقات CSS في Sass

القواعد المتشعّبة (Nested Rules) تسمح Sass لقواعد CSS بأن تتشعّب داخل بعضها البعض ولا تطبَّق في تلك الحالة القاعدة الداخليَّة إلّا ضمن المُحدّد الخارجي الذي يتضمّنها (outer rule's selector). انظر على سبيل المثال إلى الشيفرة التالية: #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } ستُصرّف إلى: #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: ...

CSS/Topics/Filter

الخاصية الوصف filter الخاصية filter في CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور <img> والخلفياتbackground والإطارات border.

CSS/Topics/Grid

الخاصية الوصف grid الخاصية grid المختصرة في CSS تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح (أي grid-template-rows و grid-template-columns وgrid-template-areas)، وجميع الخاصيات التي تُحدِّد خصائص الشبكة ضمنيًا (أي grid-auto-rows و grid-auto-columns و grid-auto-flow)، والخاصيات التي تُضبِط الفراغ بين الأعمدة والأسطر (أي grid-column-gap وgrid-row-gap)، وكل ذلك في قاعدة واحدة. grid-area الخاصية grid-area في CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه. grid-auto-columns تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا. grid-auto-flow تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. grid-auto-rows تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. grid-column الخاصية grid-column في CSS هي خاصية مختصرة ...

بناء Javascript و CSS

مقدمة لا يفرض Laravel عليك استخدام أي معالج JavaScript و CSS، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام Bootstrap و Vue ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر npm لتنصيب حزم الواجهات الأمامية هذه. CSS يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة CSS أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة CSS بصفة عامّة ...

الدالة calc()‎ في CSS

الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>. /* property: calc(expression) */ width: calc(100% - 80px); أمثلة يمكن بسهولة ضبط موضع أحد العناصر باستخدام الدالة calc()‎ بتحديد قيمة للهامش، ففي هذا المثال أنشأنا عنصرًا يمتد على طول النافذة، مع فراغ بمقدار 40px على جانبيه: <div class="banner">هذا هو الشعار!</div> شيفرة CSS: .banner { position: absolute; ...

CSS/Topics/Values

الخاصية الوصف القيمة الفعلية القيمة الفعلية (actual value) لإحدى خاصيات CSS هي القيمة المستخدمة لتلك الخاصية بعد إجراء أيّة عمليات تقريب لازمة، فمثلًا قد لا يعرض المتصفح الإطاراتborder إلا إذا كانت سماكتها تكافئ رقمًا صحيحًا بواحدة البكسل، لذا قد تُقرِّب تلك السماكة إلى أقرب عدد صحيح قبل تطبيقها. القيمة المحسوبة القيمة المحسوبة (computed value) لإحدى خاصيات CSS تُحسَب من القيمة المُحدَّدة. القيمة المُحدَّدة القيمة المُحدَّدة (specified value) لإحدى خاصيات CSS هي القيمة المضبوطة لتلك الخاصية، سواءً من صفحة الأنماط مباشرةً، أو من العنصر ...

CSS/Topics/Transform

الخاصية الوصف backface-visibility تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر. perspective تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر، لكي نتمكن من وضع العناصر الأبناء في ذاك الفضاء، وتسمح هذه الخاصية لنا بإضفاء شعور بالعمق إلى العنصر، بجعل العناصر الأقرب إلى المستخدم تبدو وأكبر، والعناصر الأبعد تبدو أصغر. perspective-origin تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، وتُستخَدم قيمة هذه الخاصية كنقطة التلاشي (vanishing ...

CSS/Topics/At Rule

الخاصية الوصف ‎@charset تُحدِّد ترميز المحرف المستخدم في صفحة الأنماط، ويجب أن تكون أوّل تعليمة في الملف ولا يسبقها أي محرف، وإذا حُدِّدَت أكثر من قاعدة ‎@charset في الملف نفسه فلن تؤخذ إلا أوّل قاعدة، ولا يمكن أن تُستعمَل هذه القاعدة في الخاصية style على عناصر HTML أو داخل العنصر<style>. ‎@font-face تسمح للمطورين بتحديد خطوط خاصة لعرض النص الموجود في صفحات الويب، وذلك بالسماح للمطورين بتعريف خطوط خاصة بهم، والقاعدة ‎@font-face أدت إلى فتح المجال أمام المطورين لاستخدام أي خطٍ يشاؤون بدل أن يكونوا ...

CSS/Topics/Flexbox

الخاصية الوصف align-content تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. align-items تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية justify-content لكن في الاتجاه المعامد. align-self تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى autoفسيتم تجاهل الخاصية align-self. flex تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية ...

التابع ‎.css()‎‎ في jQuery

يُستخدَم التابع ‎.css()‎ في الحصول على القيمة المحسوبة لخاصية من خاصيات التنسيق (computed style property) للعنصر الأول من مجموعة العناصر المُطابِقة أو تعيين واحدة أو أكثر من خاصيّات CSS لكل عنصر مُطابِق. ‎.css( propertyName )‎ القيمة المعادة سلسلة نصيّة من الكائن String. الوصف الحصول على خاصيّات التنسيق المحسوبة للعنصر الأول من مجموعة العناصر المُطابِقة. ‎.css( propertyName )‎ أضيفت في الإصدار: 1.0. propertyName سلسلة نصيّة String، وتُمثِّل اسم خاصيّة CSS. ‎.css( propertyNames )‎ أضيفت في الإصدار: 1.9. propertyNames مصفوفة Array، وتُمثِّل ...

CSS/Topics/Text

الخاصية الوصف direction تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction. letter-spacing تُحدِّد ما هو التباعد بين الأحرف النصية. line-break تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. overflow-wrap تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

CSS/Topics/Misc

العنصر الوصف ‎--*‎ أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمة يمكن إعادة استخدامها في المستند عبر الدالة var()‎. attr()‎ الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل. calc()‎ الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات<length> و <percentage> و <angle> و <time> و <number> و<integer>. inherit الكلمة المحجوزة inherit في ...

CSS/Topics/Font

الخاصية الوصف font الخاصية font في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر. font-family تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة، وذلك لتُطبَّق على العنصر. font-kerning تتحكم باستخدام معلومات تآلف الأحرف (kerning information) المُخزّنة في الخط المستخدم. font-size تضبط حجم الخط، وضبط حجم الخط قد يؤدي إلى تغيير حجم عناصر أخرى، لأن حجم الخط سيُستخدَم لحساب قيمة الأطوال <length> ذات الواحدة em و ex. font-size-adjust الخاصية font-size-adjust في CSS تقول أنَّ حجم الخط ...

CSS/Topics/Columns

الخاصية الوصف column-count تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها. column-fill تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا. column-gap تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements). column-rule الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة. column-rule-color تُحدِّد لون الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر ...

CSS/Topics/Text

الخاصية الوصف direction تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction. letter-spacing تُحدِّد ما هو التباعد بين الأحرف النصية. line-break تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. overflow-wrap تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

CSS/Topics/Color

الخاصية الوصف color تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة currentColor، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية color مباشرةً (مثل الخاصيةborder-color). opacity تحديد درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.

CSS/Topics/Transition

الخاصية الوصف transition خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay. transition-delay تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير. transition-duration تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية 0s لن تؤدي إلى حدوث تأثير انتقال أبدًا. transition-property تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال. transition-timing-function تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بتأثير الانتقال، أي أنها تسمح لك بتحديد ما هو منحني التسارع ...

CSS/Topics/Table

الخاصية الوصف border-collapse تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا). border-spacing تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate. caption-side تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر<caption>. empty-cells تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطر خلايا الجداول <table> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا ...

CSS/Topics/Border

شكل الإطار الخاصية الوصف border الخاصية border في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none. border-bottom الخاصية border-bottom في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر. border-bottom-color تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في ...

CSS/Topics/Background

الخاصية الوصف background الخاصية background المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات. يمكن استخدام الخاصية background لضبط قيم خاصية أو أكثر من الخاصيات الآتية: background-clip، و background-color، و background-image، و background-origin، وbackground-position، و background-repeat، و background-size، و background-attachment. background-attachment تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية background-image) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له. background-blend-mode تصف كيف يجب أن تمتزج صور الخلفية ...

تبديل قيم البيانات إلى كائنات (Replace Data Values with Objects)

المشكلة وجود حقلٍ (field) مٌخصَّص للبيانات في صنفٍ (class) ما (أو في عددٍ من الأصناف)، ولهذا الحقل بياناته وسلوكه (behaviour) المرتبط به. الحل إنشاء صنفٍ جديدٍ ليُوضَع فيه الحقل (field) بالإضافة إلى سلوكه المرتبط به، وتخزين كائنٍ (object) من هذا الصنف الجديد في الصنف الأصليّ للحقل. مثال قبل إعادة التصميم يحتوي الصنف Order على الحقل customer الذي يحتوي بيانات نصيّة (من النوع String) كما هو واضح في مخطط الأصناف الآتي: الصنف Order يحتوي على الحقل customer الذي يحتوي بيانات نصيّة. ...

العنصر
يُمثِّل العنصر <object> موردًا خارجيًا، والذي يمكن أن يُعامل كصورة، أو كمورد سيُعالَج عبر إضافة خارجية. مثال عن استخدام العنصر <object> لتضمين مقطع بصيغة فلاش (flash، بصيغة swf): <object data="movie.swf" type="application/x-shockwave-flash"></object> مثال آخر عن تضمين مقطع فلاش، لكن مع تمرير معاملات له عبر العنصر <param>: <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> بطاقة العنصر تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي. المحتوى المسموح يجوز استخدام العنصر <param> صفر مرة أو أكثر، ثم أي ...

القيمة

نوع البيانات <url> في CSS يُشير إلى أحد الموارد (resources)، مثل الصور أو الخطوط، وتُستخدَم روابط URL في الكثير من الخاصيات، مثل background-image و cursor و list-style. دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الرئيسي 1.0 1.0 3.0 3.5 1.0 الشكل العام نوع البيانات <url> يُمثَّل عبر الدالة url()‎، ويمكن أن يوضع الرابط داخلها دون علامات اقتباس، أو محاطًا بعلامات اقتباس مفردة أو مزدوجة؛ ويُسمَح باستخدام روابط URL النسبية (relative URLs)، وسيكون مسارها نسبةً إلى ملف الأنماط، ...

تكرار البيانات المرُاقَبة (Duplicate Observed Data)

المشكلة هل بيانات النطاق المخزَّنة في أصناف هي المسؤولة عن واجهة المستخدم الرسومية (GUI)؟ إذًا، إليك الحل. الحل فصل البيانات في أصناف منفصلة لضمان الاتصال والتزامن بين صنف النطاق وواجهة المستخدم الرسومية (GUI). مثال قبل إعادة التصميم إليك المخطط التالي لبيانات نطاق مخزَّنة في أصناف والمسؤولة عن الواجهة الرسومية: بيانات النطاق مخزَّنة في أصناف. بعد إعادة التصميم يصبح المخطط السابق بالشكل التالي بعد إعادة التصميم: فصل البيانات في أصناف منفصلة لضمان الاتصال والتزامن بين صنف النطاق وواجهة المستخدم الرسومية. لم ...

أصناف البيانات (Data Classes) في لغة Kotlin

تُنشَأ بعض الأصناف بهدف تخزين البيانات فيها بشكلٍ أساسيّ، وبالتالي فإنّ كلّ ما تقوم به هذه الأصناف من وظائف يرتبط بالبيانات، وهذا ما يُسمى بأصناف البيانات في لغة Kotlin وتُعرَّف بالمُحدِّد data كما يلي: data class User(val name: String, val age: Int) قواعد عامّة يقوم المُترجِم في الأصناف من هذه النوع باشتقاق العناصر (deriving members) الآتية من كلِّ الخاصّيّات المُعرَّفة في الباني الأساسيّ (primary constructor): كلًا من equals()‎ و hashCode()‎ الدالة toString()‎ بشكلها ‎"User(name=John, age=42‎)‎"‎ الدوال بالصيغة componentN() functions بما ...

تبديل رموز الأنواع بالأصناف (Replace Type Code with Class)

ما هو رمز النوع (type code)؟ يحدث رمز النوع عندما يوجد مجموعة من الأرقام أو السلاسل النصية التي تشكل قائمة بالقيم المسموح بها لبعض العناصر بدلًا من استخدام نوع بيانات منفصل. غالبا ما تُعطى هذه الأرقام والسلاسل المحددة أسماءً مفهومة عن طريق الثوابت، وهو السبب في استخدام هذه الرموز بشكل كبير. المشكلة يحتوي الصنف على حقل يحتوي على رموز الأنواع. ولا تُستخدم قيم هذا النوع في شروط المُشغِّل ولا تؤثر على سلوك البرنامج. الحل إنشاء صنف جديد واستخدام كائناته بدلًا ...

CSS/Topics/Pseudo Elements

العنصر الوصف ‎::after‎ هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. ‎::backdrop هو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة. ‎::before هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. ‎::first-letter يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية). ‎::first-line ...

CSS/Topics/Box Model

خصائص الصندوق الخاصية الوصف box-sizing تُستخدم لتعديل النموذج الصندوقي الافتراضي في CSS (أي CSS box model) المستخدم لحساب عرض وارتفاع العناصر. height تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار. max-height تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تتجاوز القيمة المُحدَّدة في الخاصية max-height. max-width تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة ...

CSS/Topics/Generated Content

الخاصية الوصف content تُستخدَم مع العنصرين الزائفين ‎::before و‎::after لتوليد محتوى في العنصر. quotes تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

CSS/Topics/User Interface

الخاصية الوصف caret-color تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <input> أو أي عنصر آخر له الخاصية contenteditable. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية. cursor تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر. outline الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد. ...

الخاصية list-style

الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات list-style-type و list-style-image و list-style-position. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: list-style-type: disc list-style-position: outside list-style-image: none تُطبَّق على عناصر القوائم. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة لكل قيمة مختصرة: list-style-image: القيمة none أو رابط URI مطلق للصورة. list-style-position: كما حُدِّدَت. list-style-type: كما حُدِّدَت. /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* ...

تبديل رموز الأنواع بالأصناف الفرعية (Replace Type Code with Subclasses)

ما هو رمز النوع؟ يحدث رمز النوع عندما يوجد مجموعة من الأرقام أو السلاسل النصية التي تشكل قائمة بالقيم المسموح بها لبعض العناصر بدلًا من استخدام نوع بيانات منفصل. وغالبًا ما تُعطَى هذه الأرقام والسلاسل المحددة أسماءً مفهومة عن طريق الثوابت، وهو السبب في استخدام هذه الرموز بشكل كبير. المشكلة يؤثر النوع المُرمَّز على سلوك البرنامج (تُطلِق قيم هذا الحقل رموز مختلفة في الشرطيات). الحل إنشاء أصناف فرعية لكل قيمة من النوع المُرمَّز. ثم استخراج السلوكيات ذات الصلة من الصنف ...

الدالة ()‎get_function في Sass

تعيد الدالة ()get_function مرجعًا إلى دالة من أجل استدعائها لاحقًا باستخدام الدالة ()call. البنية العامة get_function($name, $css: false) المعاملات ‎$name اسم الدالة المراد الحصول على مرجع لها. ‎$css يحدِّد هذا المعامل ما إذا كانت ستُعاد دالة خاصة بلغة CSS. إن كانت قيمة هذا المعامل هي FALSE، فقد يُشير مرجع الدالة إلى دالةٍ معرّفة في ملف الأنماط أو مضمَّنة في بيئة المضيف؛ وإن كانت قيمته TRUE، فسيشير إلى دالة خاصة بلغة CSS. القيم المعادة يُعاد مرجعٌ للدالة ذات الاسم ‎$name. أمثلة ...

الدالة ‎‎jQuery.post()‎‎ في jQuery

jQuery.post( url [, data ] [, success ] [, dataType ] )‎ القيم المعادة تعيد كائنًا من النوع jqXHR. الوصف تجلب هذه الدالة بياناتٍ من الخادم باستعمال طلب HTTP عبر الطريقة POST. jQuery.post( url [, data ] [, success ] [, dataType ] )‎ أُضيف مع الإصدار: 1.0. url سلسلة نصية تحتوي على الرابط URL الذي سيُرسل الطلب إليه. data كائنٌ مجرَّد أو سلسلة نصية ترسل إلى الخادم مع الطلب. success دالةٌ من الشكل Function( Object data, String textStatus, jqXHR ...

الدالة ‎‎jQuery.post()‎‎ في jQuery

jQuery.post( url [, data ] [, success ] [, dataType ] )‎ القيم المعادة تعيد كائنًا من النوع jqXHR. الوصف تجلب هذه الدالة بياناتٍ من الخادم باستعمال طلب HTTP عبر الطريقة POST. jQuery.post( url [, data ] [, success ] [, dataType ] )‎ أُضيف مع الإصدار: 1.0. url سلسلة نصية تحتوي على الرابط URL الذي سيُرسل الطلب إليه. data كائنٌ مجرَّد أو سلسلة نصية ترسل إلى الخادم مع الطلب. success دالةٌ من الشكل Function( Object data, String textStatus, jqXHR ...

محددات العناصر السليلة

مُحدِّد العناصر السليلة (descendant combinator) في CSS الذي يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول. المُحدِّد الآتي سيُطابِق عنصر <li> التي تكون أبناءً للقائمة <ul> ذات الصنف my-things: ul.my-things li { margin: 2em; } يمكن أن يكون مُحدِّد العناصر السلسلة فراغًا أو أكثر، أو مفتاح الجدولة tab، أو سطر جديد، على ألّا يكون هنالك رمز آخر بين المُحدِّدين. وبسبب طبيعة هذا المُحدِّد التي لا تضع حدًا معيّنًا لعدد الأحرف التي تُمثِّله مقارنةً بغيره ...

Document.querySelectorAll()‎

يُعيد التّابع Document.querySelectorAll()‎ كائنًا ثابتًا (غير حيّ) من النّوع NodeList الذي يُمثّل قائمة عناصر المستند التي تُوافق المُحدّدات المعطاة. مُلاحظة: هذا التّابع مبني على التّابع ParentNode.querySelectorAll()‎. البنية العامة elementList = parentNode.querySelectorAll(selectors); selectors‎ سلسلة نصيّة من النّوع DOMString تحتوي على مُحدّد واحدٍ أو أكثر لمُوافقته مع عناصر المستند والبحث عن العنصر المرغوب. يجب على هذه السّلسلة النّصيّة أن تكون مُحدّد CSS صالح، إن لم يكن كذلك، فسيُرمى استثناء SyntaxError، انظر هذه الصّفحة للمزيد حول المُحدّدات وكيفيّة إدارتها. يُمكن تحديد عدّة محدّدات ...

الصنف ‎:only-of-type‎

الصنف الزائف ‎:only-of-type‎ في CSS (أي pseudo-class) يُطابِق عنصرًا لا يملك أيّة عناصر أخوة (siblings) من نفس نوعه. هذا المُحدِّد يُحدِّد جميع عناصر <p> التي لا يوجد لها أخوة من النوع <p>: p:only-of-type { background-color: lime; } ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد: :only-of-type أمثلة لاحظ كيف استخدمنا الصنف الزائف ‎:only-of-type في المثال الآتي: <main> <div>أنا `div` #1.</div> ...

تبديل رموز الأنواع بالحالة/الاستراتيجية (Replace Type Code with State/Strategy)

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

القيمة

نوع البيانات <percentage> في CSS يستعمل لتمثيل النسب المئوية، إذ يقبل عددٌ كبيرٌ من خاصيات CSS القيمَ كنسبٍ مئوية، وتُستخدَم عادةً لتعريف أحد الأبعاد نسبةً إلى أبعاد العنصر الأب. أمثلة عن الخاصيات التي تقبل نوع البيانات <percentage>: الخاصية width و margin و padding و font-size. ملاحظة: لا يمكن وراثة إلا القيم المحسوبة، أي حتى لو استخدمنا نسبةً مئويةً في إحدى خاصيات العنصر الأب، لكن ستورَّث القيمة الحقيقة (أي ستكون القيمة الحقيقة المحسوبة للخاصية width هي بالبكسل) ولن تورَّث النسب المئوية. ...

الخاصية list-style-image

الخاصية list-style-image في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على عناصر القوائم. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة القيمة none أو رابط URI مطلق للصورة. /* كلمة مفتاحية */ list-style-image: none; /* <url> قيم */ list-style-image: url('starsolid.gif'); /* القيم العامة */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن ...

الصنف ‎:only-child‎

الصنف الزائف ‎:only-child‎ في CSS (أي pseudo-class) يُطابِق عنصرًا لا يملك أيّة عناصر أخوة (siblings)، وهذا المُحدِّد يماثل ‎:first-child:last-child أو ‎‎:nth-‎child(1):nth-last-child(1)‎‎‎ لكن درجة التحديد له أقل. هذا المُحدِّد يُحدِّد جميع عناصر <p> التي لا يوجد لها أخوة: p:only-child { background-color: lime; } ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد: :only-child أمثلة لاحظ كيف استخدمنا الصنف الزائف ‎:only-child‎ في المثال الآتي: <main> ...

القيمة

نوع البيانات <image> في CSS يستعمل لتمثيل صورة ثنائية الأبعاد؛ وهنالك نوعان من الصور: الصور التقليدية التي يُشار إليها عادةً باستخدام رابط URL، والصور المولّدة ديناميكيًا، مثل التدرجات اللونية <gradient>. يمكن استخدام القيمة <image> مع عدد كبير من خاصيات CSS مثل background-image و border-image و content و list-style-image و cursor. دعم المتصفحات الميزة Chrome Firefox Internet Explorer Safari Opera <url> مدعومة مدعومة مدعومة مدعومة مدعومة <gradient> 26.0 16.0 10.0 6.1 12.1 أنواع الصور يمكن أن تتعامل CSS مع أنواع الصور ...

القيمة

نوع البيانات <integer> في CSS هو نوعٌ خاصٌ من <number> الذي يُمثِّل الأعداد الصحيحة، سواءً كانت موجبة أو سالبةً؛ وتستُعمَل الأعداد الصحيحة في الكثير من خاصيات CSS مثل column-count و grid-column و grid-row و z-index. دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الرئيسي 1.0 1.0 3.0 مدعومة 1.0 الشكل العام نوع البيانات <integer> يتألف من رقم أو أكثر في نظام العد العشري (من 0 إلى 9) ويمكن أن يُسبَق -اختياريًا- بإشارة + أو -، ولا توجد واحدة ...

محددات العناصر الأخوة المتجاورة

مُحدِّد العناصر الأخوة المتجاورة (adjacent sibling combinator) في CSS رمزه + ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك. المُحدِّد الآتي سيُطابِق الفقرات <p> التي تأتي مباشرةً بعد الصور <img>: img + p { font-style: bold; } الشكل العام لهذا المحدد: former_element + target_element { style properties } أمثلة لاحظ أثر استخدام الفئة الزائفة ‏‏(pseudo-class)‏‏ ‎:first-of-type لتحديد أوّل عنصر <li> في الصفحة، وكيف أدى مُحدِّد العناصر الأخوة + إلى تحديد ...

القيمة

نوع البيانات <string> في CSS يُمثِّل سلسلةً من المحارف، ويمكن استخدام السلاسل النصية في الكثير من خاصيات CSS، مثل content و font-family و quotes. دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الرئيسي 1.0 1.0 6.0 مدعومة 1.0 الشكل العام السلاسل النصية <string> تتألف من أيّ عدد من محارف يونيكود محاطةً بعلامتَي اقتباس مزدوجتين " أو مفردتين '. أغلبية المحارف تُمثَّل كما أُدخِلَت، ويمكن تمثيل المحارف أيضًا باستخدام رموز محارف يونيكود بالنظام الست عشري، وذلك بوضع شرطة خلفية ...

القيمة

نوع البيانات <number> في CSS يُمثِّل القيم العددية، سواءً كانت أعدادًا صحيحةً (integer) أو أعدادًا عشريةً. دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الرئيسي 1.0 1.0 5.0 مدعومة 1.0 الصيغة العلمية 43.0 29.0 11.0 ؟ ؟ الشكل العام الشكل العام لنوع البيانات <number> يشبه شكل نوع البيانات <integer>، إلا أنَّه قد يحتوي على جزء عشري يُمثَّل عبر نقطة . متبوعة برقم أو أكثر. ولا توجد واحدة (unit) ترتبط مع هذا النوع من القيم. أمثلة أمثلة عن قيم ...

العنصر

يُمثِّل العنصر <ul> قائمةً غير مرتبة من العناصر، التي تُعرَض على شكل قائمة منقطة عادةً. قائمة غير مرتبة <ul> فيها ثلاثة عناصر <li>: <ul> <li>العنصر الأول</li> <li>العنصر الثاني</li> <li>العنصر الثالث</li> </ul> بطاقة العنصر تصنيفات المحتوى محتوى تنظيمي. المحتوى المسموح عنصر <li> واحد أو أكثر، ويمكن لهذا العنصر أن يحتوي أيضًا على قوائم <ol> أو <ul> متشعبة داخله. الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية. العناصر الأب أي عنصر يقبل المحتوى التنظيمي. واجهة DOM HTMLUListElement ...

العنصر