نتائج البحث

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

الحقل hidden

عناصر <input> ذات النوع hidden تسمح لمطوري الويب بتضمين البيانات التي لا يمكن رؤيتها أو تعديلها من المستخدمين عند إرسال النموذج، فمثلًا يمكن تخزين مُعرِّف المحتوى الذي يتم طلبه حاليًا أو تعديله أو غير ذلك. الحقول المخفية لن تُعرَض في الصفحة ولا توجد أيّ طريقة (في HTML) لفعل ذلك. <input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما"> إذا جرَّبتَ الشيفرة السابقة لكنك لم تجد أيّ نتيجة فهذا طبيعي، فتذكر أنَّ الحقول المخفية لن تظهر لزائر الصفحة. الخاصية value تحتوي الخاصية value في الحقل ...

القيمة HIDDEN في Kotlin

تشير القيمة HIDDEN إلى أن العنصر المهمل (deprecated elements) غير متاح للاستخدام ضمن الشيفرة. انظر أيضًا القيمة WARNING: تشير إلى وجود تحذير تولد نتيجة استعمال عنصر مهمل (deprecated element). القيمة ERROR: تشير إلى وجود خطأٍ تولد نتيجة استعمال عنصر مهمل (deprecated element). مصادر صفحة HIDDEN في التوثيق الرسميّ للمكتبة القياسيّة في لغة Kotlin.

المحدد ‎‎‎:hidden()‎‎ في jQuery

المحدد ‎:hidden()‎ الوصف يختار هذا المحدد كل العناصر المخفية. jQuery( ":hidden" )‎ أُضيف مع الإصدار: 1.0. يمكن للعناصر أن تُعد مخفية لعدة أسباب منها: أن تطبق الخاصية display: none عليها. هي حقول من حقول النماذج  التي لها الخاصية type="hidden"‎. ضبطت قيمة طولها وعرضها إلى 0. العنصر الأب مخفي، مما يعني أن العنصر الابن مخفي أيضًا ولا يظهر في الصفحة. العناصر التي لها الخاصية visibility: hidden أو الخاصية opacity: 0 تعدّ مرئية رغم أنها لا تظهر في الشاشة إلا أنها ما ...

الخاصية visibility

الخاصية visibility في CSS تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <table>. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة نعم القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ visibility: visible; visibility: hidden; visibility: collapse; /* القيم العامة */ visibility: inherit; visibility: initial; visibility: unset; ملاحظة: إذا أردتَ إخفاء العنصر وإزالته من تخطيط المستند معًا، فاضبط الخاصية display إلى ...

الخاصية border-style

الخاصية المختصرة border-style في CSS تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي). /* الكلمات المحجوزة */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* القيم العامة */ border-style: inherit; border-style: initial; border-style: unset; ملاحظة: القيمة الابتدائية للخاصية border-style هي none، وهذا يعني أنَّه حتى لو ضبطتَ الخاصيتين border-width و ...

الخاصية overflow

الخاصية overflow في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي عند تجاوزه أبعاد الحاوية الكتلية التي هو فيها. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على عناصر block-level و inline-block غير المُستبدَلة (non-replaced). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* لن يتم اقتصاص المحتوى */ overflow: visible; /* سيتم اقتصاص المحتوى دون عرض شريط تمرير */ overflow: hidden; /* سيتم اقتصاص المحتوى مع عرض شريط تمرير ...

الخاصية border-left-style

الخاصية border-left-style في CSS تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; /* القيم العامة */ border-left-style: inherit; border-left-style: initial; border-left-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-left-style. شيفرة HTML: <table> <tr> ...

الخاصية border-right-style

الخاصية border-right-style في CSS تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر. القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-right-style: none; border-right-style: hidden; border-right-style: dotted; border-right-style: dashed; border-right-style: solid; border-right-style: double; border-right-style: groove; border-right-style: ridge; border-right-style: inset; border-right-style: outset; /* القيم العامة */ border-right-style: inherit; border-right-style: initial; border-right-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-right-style. شيفرة HTML: <table> <tr> ...

الخاصية overflow-x

الخاصية overflow-x في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي على يمينه أو يساره. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على عناصر block-level و inline-block غير المُستبدَلة (non-replaced). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* لن يتم اقتصاص المحتوى */ overflow-x: visible; /* سيتم اقتصاص المحتوى دون عرض شريط تمرير */ overflow-x: hidden; /* سيتم اقتصاص المحتوى مع عرض شريط تمرير */ overflow-x: scroll; /* ترك الأمر ...

الخاصية border-bottom-style

الخاصية border-bottom-style في CSS تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: solid; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: outset; /* القيم العامة */ border-bottom-style: inherit; border-bottom-style: initial; border-bottom-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-bottom-style. شيفرة HTML: <table> <tr> ...

الخاصية border-top-style

الخاصية border-top-style في CSS تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* القيم العامة */ border-top-style: inherit; border-top-style: initial; border-top-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-top-style. شيفرة HTML: <table> <tr> ...

المحدد ‎:visible‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery

المحدد ‎:visible الوصف تحديد كل العناصر المرئية. jQuery( ":visible" )‎ أُضيف مع الإصدار: 1.0. تعدّ العناصر مرئية إذا كانت تشغل مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر. العناصر ذات الخاصية visibility: hidden أو opacity: 0 تعدّ مرئية، نظرًا لأنها لا تزال تستهلك مساحة في تخطيط الصفحة. تعدّ العناصر غير الموجودة في المستند مخفية؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط المُطبّقة. هذا المحدد هو ...

الخاصية overflow-y

الخاصية overflow-y في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على عناصر block-level و inline-block غير المُستبدَلة (non-replaced). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* لن يتم اقتصاص المحتوى */ overflow-y: visible; /* سيتم اقتصاص المحتوى دون عرض شريط تمرير */ overflow-y: hidden; /* سيتم اقتصاص المحتوى مع عرض شريط تمرير */ overflow-y: scroll; /* ترك الأمر بيد ...

الخاصية backface-visibility

الخاصية backface-visibility في CSS تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ backface-visibility: visible; backface-visibility: hidden; /* القيم العامة */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; هنالك حالات لا نريد فيها إظهار الوجه الأمامي للعنصر معكوسًا على الوجه الخلفي، كما في تأثير قلب البطاقات. لاحظ أنَّ هذه الخاصية ...

الخاصية border-left

الخاصية border-left في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-left-color و border-left-style و border-left-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيسر للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-left-width: medium border-left-style: none border-left-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-left-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-left-style إلى none أو hidden. border-left-style: كما حُدِّدَت. border-left-color: اللون المحسوب. border-left: 1px; border-left: 2px dotted; border-left: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية border-right

الخاصية border-right في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-right-color و border-right-style و border-right-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيمن للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-right-width: medium border-right-style: none border-right-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-right-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-right-style إلى none أو hidden. border-right-style: كما حُدِّدَت. border-right-color: اللون المحسوب. border-right: 1px; border-right: 2px dotted; border-right: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية text-overflow

الخاصية text-overflow في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه U+2026)، أو عرض سلسلة نصية خاصة. بطاقة الخاصية القيمة الابتدائية clip تُطبَّق على الحاويات الكتلية (block container elements). قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ text-overflow: clip; text-overflow: ellipsis; /* <string> سلسلة نصية */ text-overflow: "…"; /* القيم العامة */ text-overflow: inherit; text-overflow: initial; text-overflow: unset; الخاصية text-overflow لا تؤدي إلى خروج المحتوى من صندوقه، ولجعل ...

الخاصية border-bottom

الخاصية border-bottom في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-bottom-width: medium border-bottom-style: none border-bottom-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-bottom-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-bottom-style إلى none أو hidden. border-bottom-style: كما حُدِّدَت. border-bottom-color: اللون المحسوب. border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية border-top

الخاصية border-top في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-top-color و border-top-style و border-top-width، هذه الخاصيات تصف كيفية عرض الإطار border العلوي للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-top-width: medium border-top-style: none border-top-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-top-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-top-style إلى none أو hidden. border-top-style: كما حُدِّدَت. border-top-color: اللون المحسوب. border-top: 1px; border-top: 2px dotted; border-top: medium dashed blue; وكما في جميع الخاصيات ...

CSS/Topics/Position

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

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

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

CSS/Topics/Selectors

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

الخاصيات المخصصة في 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/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/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

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

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 تصف كيف يجب أن تمتزج صور الخلفية ...

الخاصية transition

الخاصية transition في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay. بطاقة الخاصية القيمة الابتدائية لكل خاصية مختصرة: transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة لكل خاصية مختصرة: transition-delay: كما حُدِّدَت. transition-duration: كما حُدِّدَت. transition-property: كما حُدِّدَت. transition-timing-function: كما حُدِّدَت. /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function ...

الخاصية border-right-width

الخاصية border-right-width في CSS تضبط عرض الإطار الأيمن للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-right-style إلى none أو hidden. /* كلمات مفتاحية */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> أطوال */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* قيم عامة */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; أمثلة سنضبط في المثال الآتي إطارًا على الجانب الأيمن لعناصر <div> لونه (border-right-color) أخضر، وعرضه (border-right-width) يساوي 4px وشكله (border-right-style) منقط. شيفرة HTML: ...

الخاصية border-left-width

الخاصية border-left-width في CSS تضبط عرض الإطار الأيسر للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم الوسائط مرئية القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-left-style إلى none أو hidden. /* كلمات مفتاحية */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> أطوال */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* قيم عامة */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; أمثلة سنضبط في المثال الآتي إطارًا على الجانب الأيسر لعناصر <div> لونه (border-left-color) أخضر، وعرضه (border-left-width) يساوي 4px وشكله (border-left-style) منقط. ...

الخاصية border-top-width

الخاصية border-top-width في CSS تضبط عرض الإطار العلوي للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-top-style إلى none أو hidden. /* كلمات مفتاحية */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> أطوال */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* قيم عامة */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; أمثلة سنضبط في المثال الآتي إطارًا علويًا لعناصر <div> لونه (border-top-color) أخضر، وعرضه (border-top-width) يساوي 4px وشكله (border-top-style) منقط. شيفرة HTML: <div>لهذا العنصر ...

الخاصية border-bottom-width

الخاصية border-bottom-width في CSS تضبط عرض الإطار السفلي للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-bottom-style إلى none أو hidden. /* كلمات مفتاحية */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> أطوال */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* قيم عامة */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; أمثلة سنضبط في المثال الآتي إطارًا سفليًا لعناصر <div> لونه (border-bottom-color) أحمر، وعرضه (border-bottom-width) يساوي 4px وشكله (border-bottom-style) منقط. شيفرة HTML: <div>لهذا العنصر ...

CSS/Topics/Pseudo Elements

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

CSS/Topics/Pseudo Classes

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

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/Data Type

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

CSS/Topics/User Interface

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

الخاصية column-rule-style

الخاصية column-rule-style في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على العناصر متعددة الأعمدة. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* القيم العامة */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset; أمثلة راجع صفحة الخاصية column-rule لأمثلة عن هذه الخاصية. دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الأساسي 4.0 (مع السابقة ...

الخاصية column-rule-width

الخاصية column-rule-width في CSS تُحدِّد عرض (أو ثخن) الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على العناصر متعددة الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة طول مطلق، أو 0 إذا كانت قيمة الخاصية column-rule-style تساوي none أو hidden. /* الكلمات المحجوزة */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> القيم الطولية */ column-rule-width: 1px; column-rule-width: 2.5em; /* القيم العامة */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; أمثلة راجع صفحة الخاصية column-rule لأمثلة عن هذه الخاصية. دعم المتصفحات ...

الخاصية outline-style

الخاصية outline-style في CSS تضبط شكل حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /* القيم العامة */ outline-style: inherit; outline-style: initial; outline-style: unset; أمثلة سنستعرض مختلف الأشكال التي ...

الخاصية border

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

الخاصية column-rule

الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. بطاقة الخاصية القيمة الابتدائية لكل خاصية مختصرة: column-rule-width: medium column-rule-style: none column-rule-color: currentcolor تُطبَّق على العناصر متعددة الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل خاصية مختصرة: column-rule-width: طول مطلق، أو 0 إذا كانت قيمة الخاصية column-rule-style تساوي none أو hidden. column-rule-style: كما حُدِّدَت. column-rule-color: قيمة لونية. هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة. /* كلمات محجوزة */ column-rule: dotted; column-rule: solid ...

التحميل الزائد في PHP

تقديم ميزة التحميل الزائد في PHP القدرة على إنشاء الخصائص والتوابع بصورة ديناميكية، وتعالج هذه العناصر الديناميكية بواسطة التوابع السحرية (magic methods) التي يمكن استخدامها في الصنف لأداء العديد من الوظائف. تنفّذ توابع التحميل الزائد عند التفاعل مع الخصائص أو التوابع غير المصرّح عنها أو غير المرئية ضمن النطاق الحالي. سيستخدم هذا القسم مصطلحي "خاصية يتعذر الوصول إليها" و"تابع يتعذر الوصول إليه" للإشارة إلى حالة التصريح وقابلية الرؤية هذه. يجب تعريف جميع توابع التحميل الزائد كتوابع من نوع public. ملاحظة: ...

التحميل الزائد في PHP

تقديم ميزة التحميل الزائد في PHP القدرة على إنشاء الخصائص والتوابع بصورة ديناميكية، وتعالج هذه العناصر الديناميكية بواسطة التوابع السحرية (magic methods) التي يمكن استخدامها في الصنف لأداء العديد من الوظائف. تنفّذ توابع التحميل الزائد عند التفاعل مع الخصائص أو التوابع غير المصرّح عنها أو غير المرئية ضمن النطاق الحالي. سيستخدم هذا القسم مصطلحي "خاصية يتعذر الوصول إليها" و"تابع يتعذر الوصول إليه" للإشارة إلى حالة التصريح وقابلية الرؤية هذه. يجب تعريف جميع توابع التحميل الزائد كتوابع من نوع public. ملاحظة: ...

الخاصية flex-direction

الخاصية flex-direction في CSS تُعرِّف ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه (عادي أم معكوس). بطاقة الخاصية القيمة الابتدائية row تُطبَّق على حاويات flex. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* اتجاه العناصر أفقي */ flex-direction: row; /* اتجاه العناصر أفقي، لكن بالمقلوب */ flex-direction: row-reverse; /* اتجاه العناصر رأسي */ flex-direction: column; /* اتجاه العناصر رأسي، لكن بالمقلوب */ flex-direction: column-reverse; /* القيم العامة */ flex-direction: inherit; flex-direction: initial; flex-direction: unset; لاحظ أنَّ القيمتين row و row-reverse تتأثران باتجاه حاوية flex، فلو كانت ...

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

يجلب هذا التابع قيمة الارتفاع الخارجي (outer height، تتضمن الحواشي padding، والإطار border، والهامش margin اختياريًّا) الحاليَّة لأول عنصر في مجموعة العناصر المطابقة، أو يغير قيمة الارتفاع الخارجي لكل العناصر المطابقة. ‎.outerHeight( [includeMargin ] )‎ القيم المعادة يعيد عددًا من النوع Number. الوصف يجلب هذا التابع قيمة الارتفاع الخارجي (outer height، تتضمن الحواشي [padding]، والإطار [border]، والهامش [margin] اختياريًّا) الحاليَّة لأول عنصر في مجموعة العناصر المطابقة. ‎.outerHeight( [includeMargin ] )‎ أضيف مع الإصدار 1.2.6. includeMargin قيمة منطقيَّة (boolean) تحدِّد إن ...

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

يجلب هذا التابع قيمة العرض الخارجي (outer width، تتضمن الحواشي padding، والإطار border، والهامش margin اختياريًّا) الحاليَّة لأول عنصر في مجموعة العناصر المطابقة، أو يغير قيمة العرض الخارجي لكل العناصر المطابقة. ‎.outerWidth( [includeMargin ] )‎ القيم المعادة يعيد عددًا من النوع Number. الوصف يجلب هذا التابع قيمة العرض الخارجي (outer height، تتضمن الحواشي [padding]، والإطار [border]، والهامش [margin] اختياريًّا) الحاليَّة لأول عنصر في مجموعة العناصر المطابقة. ‎.outerWidth( [includeMargin ] )‎ أضيف مع الإصدار 1.2.6. includeMargin قيمة منطقيَّة (boolean) تحدِّد إن ...

الخاصيات العامة

الخاصيات العامة هي الخاصية التي يمكن استعمالها في جميع عناصر HTML، على الرغم من أنَّها قد لا يكون لها تأثير إن استعملت على بعض العناصر. يمكن أن تستعمل الخاصيات العامة على جميع عناصر HTML حتى لو لم تكن هذه العناصر موجودةً في المعيار، وهذا يعني أنَّ العناصر غير المعيارية يجب أن تسمح باستخدام هذه الخاصية، حتى لو كان استخدام هذه العناصر سيؤدي إلى جعل المستند غير متوافق مع معيار HTML5. فمثلًا ستخفي المتصفحات التي تدعم HTML5 المحتوى الموجود ضمن العنصر ...

الصنف ‎‎DeprecationLevel‎ في Kotlin

يحوي الصنف DeprecationLevel مستويات تصف درجات الإهمال (deprecation levels). enum class DeprecationLevel القيم القابلة للعد (Enum Values) WARNING تشير القيمة WARNING إلى وجود تحذير تولد نتيجة استعمال عنصر مهمل (deprecated element). ERROR تشير القيمة ERROR إلى وجود خطأٍ تولد نتيجة استعمال عنصر مهمل (deprecated element). HIDDEN تشير القيمة HIDDEN إلى أن العنصر المهمل (deprecated elements) غير متاح للاستخدام ضمن الشيفرة. الخاصيات الموروثة (Inherited Properties) name تمثِّل الخاصية Enum.name اسم الثابت المعرف في الكائن enum الذي استُدعي معها كما سُمّي أُثناء تعريف هذا الكائن. ordinal تمثل الخاصية Enum.ordinal ترتيب (ordinal) الثابت المعرف في ...

الصنف ‎‎DeprecationLevel‎ في Kotlin

يحوي الصنف DeprecationLevel مستويات تصف درجات الإهمال (deprecation levels). enum class DeprecationLevel القيم القابلة للعد (Enum Values) WARNING تشير القيمة WARNING إلى وجود تحذير تولد نتيجة استعمال عنصر مهمل (deprecated element). ERROR تشير القيمة ERROR إلى وجود خطأٍ تولد نتيجة استعمال عنصر مهمل (deprecated element). HIDDEN تشير القيمة HIDDEN إلى أن العنصر المهمل (deprecated elements) غير متاح للاستخدام ضمن الشيفرة. الخاصيات الموروثة (Inherited Properties) name تمثِّل الخاصية Enum.name اسم الثابت المعرف في الكائن enum الذي استُدعي معها كما سُمّي أُثناء تعريف هذا الكائن. ordinal تمثل الخاصية Enum.ordinal ترتيب (ordinal) الثابت المعرف في ...

القيمة WARNING في Kotlin

تشير القيمة WARNING إلى وجود تحذير تولد نتيجة استعمال عنصر مهمل (deprecated element). انظر أيضًا القيمة ERROR: تشير إلى وجود خطأٍ تولد نتيجة استعمال عنصر مهمل (deprecated element). القيمة HIDDEN: تشير إلى أن العنصر المهمل (deprecated elements) غير متاح للاستخدام ضمن الشيفرة. مصادر صفحة WARNING في التوثيق الرسميّ للمكتبة القياسيّة في لغة Kotlin.

القيمة ERROR في Kotlin

تشير القيمة ERROR إلى وجود خطأٍ تولد نتيجة استعمال عنصر مهمل (deprecated element). انظر أيضًا القيمة WARNING: تشير إلى وجود تحذير تولد نتيجة استعمال عنصر مهمل (deprecated element). القيمة HIDDEN: تشير إلى أن العنصر المهمل (deprecated elements) غير متاح للاستخدام ضمن الشيفرة. مصادر صفحة ERROR في التوثيق الرسميّ للمكتبة القياسيّة في لغة Kotlin.

المحددات في jQuery

توفر مكتبة jQuery مجموعة قوية من الأدوات لمطابقة العناصر وتحديدها في الصفحة، إذ استفادت المكتبة من CSS بجميع إصداراتها. من أجل استعمال المحارف الخاصة (مثل !"#$%&'()*+,./:;<=>?@[\]^`{|}~) كجزء صرف من الاسم المراد تحديده، يجب أن تهرب تلك المحارف عبر \\. على سبيل المثال، إن كان اسم العنصر المراد تحديده هو id="foo.bar"، يمكنك تحديده عبر المُحدِّد $("#foo\\.bar"). تحوي مواصفات CSS القياسية (أي W3C CSS specification) مجموعة كاملة من القواعد المتعلقة بالمحددات الصالحة. هنالك أيضًا مقالة مفيدة لصاحبها Mathias Bynens تتحدث عن تهريب ...

السلسلة في رابط الكائنات بالعلاقات Eloquent

مقدمة عند بناء واجهات JSON APIs، تحتاج معظم الأوقات إلى تحويل نماذجك وعلاقاتها إلى مصفوفات أو كائنات JSON. يزود Eloquent بمجموعة من التوابع المساعدة لهذه التحويلات، إضافةً إلى التحكم بالحقول التي يجب تضمينها في التحويلات. سلسلة النماذج والمجموعات السلسلة لمصفوفات لتحويل نموذج وعلاقاته المحمّلة لمصفوفة، يمكنك استخدام التابع toArray. إن هذا التابع تعاودي، لذلك ستُحوّل كل الحقول وكل العلاقات (وعلاقات العلاقات) إلى مصفوفات: $user = App\User::with('roles')->first(); return $user->toArray(); يمكنك أيضًا تحويل مجموعة كاملة من النماذج إلى مصفوفة: $users = App\User::all(); return $users->toArray(); السلسلة ...

Document.visibilityState

تُعيد الخاصيّة Document.visibilityState القابلة للقراءة فقط حالةَ ظهور المُستند، أي سياق وضوح العنصر الحالي. إذ من المُفيد معرفة ما إذا كان المُستند في الخلفيّة أو في تبويب (لسان، tab) غير مرئي حاليًّا، أو أنّ الصّفحة قد حُمّلت فقط من أجل ما قبل التّصيير (pre-rendering). القيم المُمكنة هي كما يلي: 'visible': تُشير إلى أنّ مُحتويات الصّفحة قد تكون ظاهرة ولو جزئيّا. هذا يعني بأنّ الصفحة موجودة على تبويب أمامي في نافذة غيرِ مُصغّرة. 'hidden': مُحتويات الصّفحة غير واضحة للمستخدم. هذا يعني ...

let في JavaScript

تعبير let يُصرِّح عن متغير محلي للقسم الكتلي، ويمكن تهيئة قيمته الابتدائية اختياريًا. البنية العامة let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]; varnameN اسم المتغير، ويمكن أن يكون أيّ معرِّف صالح في JavaScript. valueN القيمة الابتدائية للمتغير، ويمكن استخدام أيّ تعبير (expression) صالح في JavaScript. الوصف التعبير let يسمح بالتصريح عن متغيرات يكون مجالها (scope) محدودًا إلى القسم الكتلي (block statement)، أو إلى التعبير (expression) الذي اُستخدِمَ فيه؛ وهو على النقيض من الكلمة المحجوزة ...

الحقل file

عناصر <input> ذات النوع file تسمح للمستخدم باختيار ملف أو أكثر لرفعها إلى الخادوم أو تعديلها باستخدام الواجهة البرمجية File. الخاصية value تحتوي الخاصية value في الحقل file على سلسلة نصية (DOMString) التي تُمثِّل المسار إلى الملف (أو الملفات) المختارة. بعض الأمور التي عليك أن تضعها بالحسبان: إذا تم اختيار عدِّة ملفات، فقيمة الخاصية value ستُمثِّل أوّل ملف مختار، لكن يمكن الوصول إلى الملفات الأخرى عبر الخاصية FileList في DOM التابعة للعنصر <input>. إذا لم يتم اختيار ملف بعد، فستكون ...

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

‎.fadeOut( [duration ] [, complete ] )‎ القيمة المعادة يُعيد كائنًا من النوع jQuery. الوصف يُخفي هذا التابع العناصر المطابقة عن طريق تحويلها إلى شفافة تدريجيًا. ‎.fadeOut( [duration ] [, complete ] )‎ أُضيف مع الإصدار: 1.0. duration (القيمة الافتراضية: 400) مدة الحركة وهو من النوع عدد Number أو سلسلة نصية String. complete دالة على الشكل Function()‎، تُستدعى بمجرد اكتمال الحركة، وتُستدعى مرة واحدة لكل عنصر مطابق. ‎.fadeOut( options )‎ أُضيف مع الإصدار: 1.0. options كائن من النوع Object، ويقدم ...

التعليقات في Sass

تدعم Sass الشكل القياسي للتعليقات متعدِّدة الأسطر باستعمال /* */ المُعتمد في لغة CSS، وكذلك التعليقات أحادية السطر باستعمال//. يُحتفظ بالتّعليقات متعدّدة الأسطر في مُخرجات CSS حيثما كان ذلك ممكنًا في حين تُزال التعليقات أحاديّة السطر. انظر مثلًا إلى الشيفرة الآتية: /* هذا التعليق * طوله عدِّة أسطر.‏ * CSS لمّا كان يستعمل بنية التعليقات في * فسيظهر في الملف المُصرَّف.‏ */ body { color: black; } // هذه التعليقات طولها سطرٌ واحدٌ فقط. // ولن تظهر في الملف المُصرَّف // CSS لأنها تستخدم ...

دليل Sass

لغة CSS لغة ممتعةٌ، ولكنّ ملفات الأنماط أصبحت أكبر وأكثر تعقيدًا، وصيانتها صعبة ومتعبة؛ يمكن حينذاك أن تساعدنا المعالجة الأوليَّة (preprocessor). تتيح لك Sass استخدام ميزات غير موجودة في CSS مثل المتغيرات، والتشعب، والمخاليط، والوراثة، وغيرها من الأشياء التي تجعل البرمجة بلغة CSS ممتعةً مرةً أخرى. تحفظ Sass الملفات المعالجة على هيئة ملف CSS عادي، والذي يمكنك استخدامه في موقعك. الطريقة المباشرة لفعل ذلك هي باستخدام سطر الأوامر (terminal). يمكنك بمجرد تثبيت Sass تصريف الملفات إلى CSS باستخدام الأمر sass. ...

الكائن jQuery.cssHooks()‎‎ في jQuery

jQuery.cssHooks القيم المعادة يعيد كائنًا من النوع Object. الوصف يتعلَّق هذا التابع بـ jQuery مباشرةً للتحكم بكيفيَّة استعادة أو ضبط قيم خاصِّيَّات CSS محدَّدة، أو توحيد أسماء خاصِّيَّات CSS، أو إنشاء خاصِّيَّات CSS مخصَّصة. jQuery.cssHooks أُضيف مع الإصدار: 1.4.3. يوفِّر الكائن ‎$.cssHooks طريقةً لتعريف دوالٍ من أجل جلب أو ضبط قيم خاصِّيَّات CSS محدَّدة. يمكن أيضًا أن يُستخدَم لإنشاء cssHooks جديد من أجل توحيد (normalizing) ميزات CSS3 مثل تأثير الظلال على إطار العناصر (box shadows)، والتدرُّجات (gradients). على سبيل المثال، ...

الكائن jQuery.cssHooks()‎‎ في jQuery

jQuery.cssHooks القيم المعادة يعيد كائنًا من النوع Object. الوصف يتعلَّق هذا التابع بـ jQuery مباشرةً للتحكم بكيفيَّة استعادة أو ضبط قيم خاصِّيَّات CSS محدَّدة، أو توحيد أسماء خاصِّيَّات CSS، أو إنشاء خاصِّيَّات CSS مخصَّصة. jQuery.cssHooks أُضيف مع الإصدار: 1.4.3. يوفِّر الكائن ‎$.cssHooks طريقةً لتعريف دوالٍ من أجل جلب أو ضبط قيم خاصِّيَّات CSS محدَّدة. يمكن أيضًا أن يُستخدَم لإنشاء cssHooks جديد من أجل توحيد (normalizing) ميزات CSS3 مثل تأثير الظلال على إطار العناصر (box shadows)، والتدرُّجات (gradients). على سبيل المثال، ...

الكلمة المحجوزة initial

الكلمة المحجوزة initial في CSS تُطبِّق القيمة الابتدائية للخاصية على العنصر، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة. لاحظ أنَّ القيمة الابتدائية في الخاصيات التي ورثت قيمها عن آبائها قد تكون مُفاجئة لك، لذا قد ترى أنَّ استخدام إحدى الكلمات المحجوزة inherit أو unset أو revert مناسبٌ أكثر. أمثلة مثال عن ضبط لون الفقرة <p> إلى اللون الأحمر، ثم استخدام الكلمة المحجوزة initial على العنصر <em> لإعادة قيمة الخاصية color إلى قيمتها الابتدائية (اللون الأسود). ...

الكلمة المحجوزة unset

الكلمة المحجوزة unset في CSS تُعيد ضبط قيمة الخاصية إلى قيمتها المورثة إن ورثت القيمة من العنصر الأب، أو إلى قيمتها الابتدائية إن لم ترثها؛ بصياغة أخرى، ستسلك هذه الكلمة المحجوزة سلوك inherit في الحالة الأولى، وسلوك initial في الحالة الثانية، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة. أمثلة إعادة ضبط قيمة الخاصية color للعنصر <p> الموجود داخل العنصر <div> ذو الصنف bar إلى قيمتها الموروثة، ألا وهي green؛ أي كأننا ضبطنا قيمة الخاصية color إلى الكلمة ...

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

إعادة العرض الحالي المحسوب للعنصر الأول من مجموعة العناصر المُطابقة، أو ضبط عرض CSS لكل عنصر في مجموعة العناصر المُطابقة. ‎.width()‎ القيمة المعادة يُعيد كائنًا من النوع Number. الوصف إعادة العرض الحالي المحسوب للعنصر الأول من مجموعة العناصر المُطابقة. ‎.width()‎ أُضيف مع الإصدار: 1.0. لا يقبل هذا الشكل أي وسائط. الفرق بين ‎.css(width)‎ و ‎.width()‎ هو أن الأخير يعيد قيمة البكسل بدون وحدة (على سبيل المثال، 400) في حين أن الأول يعيد القيمة مع وحدات سليمة (على سبيل المثال، 400px). ...

الكلمة المحجوزة inherit

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

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

يجلب الإحداثيات الحاليَّة للعنصر الأول أو يضبط إحداثيات كل عنصر في مجموعة العناصر المطابقة نسبةً إلى الصفحة. ‎.offset()‎ القيم المعادة يعيد كائنًا من النوع Object. الوصف يجلب الإحداثيات الحاليَّة للعنصر الأول في مجموعة العناصر المطابقة نسبةً إلى الصفحة. ‎.offset()‎ أُضيف مع الإصدار: 1.2. لا يقبل هذا الشكل أي وسائط. يسمح لنا التابع ‎.offset()‎ بمعرفة الموقع الحالي لعنصر محدَّد (خصوصًا معرفة حدوده ويُستثنى منها الهوامش) نسبةً إلى الصفحة. من جهة أخرى، نجد أنَّ التابع ‎.position()‎ يعيد الموقع الحالي للعنصر نسبة إلى ...

الدالة 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 ...

القيمة

نوع البيانات <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)، وسيكون مسارها نسبةً إلى ملف الأنماط، ...

الخاصية width

الخاصية width في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. /* كلمة محجوزة */ width: auto; /* <length> أطوال ...

ترجمة الأصول (Laravel Mix)

مقدمة يوفّر Laravel Mix واجهة برمجية (API) واضحة لتعريف خطوات بناء Webpack للتطبيق باستعمال العديد من المعالجات المسبقة (pre-processors) للغتي CSS و Javascript. باستخدام سلسلة بسيطة من استدعاءات التوابع، يمكن تعريف مسار معالجة الأصول (assets) في التطبيق. فمثلًا: mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); إن أصبحت مرتبكا و مشوشا حول البدء مع Webpack وترجمة الأصول، فسوف تحب Laravel Mix. لكنك لست مطالبًا باستعمالها لبناء تطبيقك. طبعًا لك حرية اختيار أي مسار لمعالجة الأصول تريده، أو أن لا تستعمل أيًا منها على ...

الخاصية counter-increment

الخاصية counter-increment في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على كل العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الزيادة بمقدار 1 */ counter-increment: my-counter; /* الإنقاص بمقدار 1 */ counter-increment: my-counter -1; /* زيادة أحد العدادات بمقدار 1 وإنقاص الثاني بمقدار 4*/ counter-increment: counter1 counter2 -4; /* عدم زيادة أو إنقاص أيّ عداد، وتُستخدَم لتجاوز القواعد التي لها أولوية أقل */ counter-increment: ...

القيمة

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

القاعدة ‎@import

القاعدة ‎@import في CSS تسمح للمطورين باستيراد قواعد التنسيق من صفحات الأنماط الأخرى، وهذا النوع من القواعد يجب أن يسبق جميع قواعد CSS الأخرى، ما عدا قواعد ‎@charset. @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import url('landscape.css') screen and (orientation:landscape); لكي تتمكن المتصفحات من تفادي تنزيل موارد لأنواع الوسائط غير المدعومة، فيمكن أن يوفِّر المطورون قواعد ‎@import مع تحديد الوسائط (media) المتربطة بها، وقواعد الاستيراد الشرطية تسمح بتحديد استعلامات عن الوسائط (media queries) يُفصَل بينها بفاصلة بعد رابط ...

العنصر ‎::selection‎

العنصر الزائف ‎::selection‎ في CSS (أي pseudo-element) يُمثِّل نصًّا في المستند الذي حدده المستخدم (باستخدام المؤشر مثلًا). ::selection { color: gold; background: red; } الشكل العام لهذا المحدد: ::selection ::-moz-selection لا يسمَح إلا باستخدام مجموعة جزئية من خاصيات CSS: color background-color cursor outline text-decoration text-emphasis-color text-shadow أمثلة مثال عن استخدام هذا العنصر الزائف لتنسيق النص الذي حدَّده المستخدم: <div>يحتوي هذا النص على أنماط خاصة عند تمييزه</div> <p>حاول أيضًا تحديد النص في هذه الفقرة</p> شيفرة CSS: ::-moz-selection { color: gold; background: red; } ::selection { ...

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

jQuery.cssNumber القيم المعادة يعيد كائنًا من النوع Object. الوصف يعيد هذا التابع كائنًا يحتوي على جميع خاصِّيَّات CSS التي يمكن استعمالها دون واحدة. يستعمل التابع ‎.css()‎ هذا الكائن ليتحقَّق إن كان بإمكانه إضافة الواحدة px إلى القيم المعطاة دون واحدة. jQuery.cssNumber أُضيف مع الإصدار: 1.4.3. يمكنك أن تتخيل أنَّ jQuery.cssNumber ليس إلا قائمةً بجميع خاصِّيَّات CSS التي يمكنك استعمالها دون واحدة. يستعمل التابع ‎.css()‎ هذه القائمة ليحدِّد إن كان هنالك حاجة لإضافة الواحدة px إلى القيم عديمة الواحدة. تكون مفاتيح ...

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

jQuery.cssNumber القيم المعادة يعيد كائنًا من النوع Object. الوصف يعيد هذا التابع كائنًا يحتوي على جميع خاصِّيَّات CSS التي يمكن استعمالها دون واحدة. يستعمل التابع ‎.css()‎ هذا الكائن ليتحقَّق إن كان بإمكانه إضافة الواحدة px إلى القيم المعطاة دون واحدة. jQuery.cssNumber أُضيف مع الإصدار: 1.4.3. يمكنك أن تتخيل أنَّ jQuery.cssNumber ليس إلا قائمةً بجميع خاصِّيَّات CSS التي يمكنك استعمالها دون واحدة. يستعمل التابع ‎.css()‎ هذه القائمة ليحدِّد إن كان هنالك حاجة لإضافة الواحدة px إلى القيم عديمة الواحدة. تكون مفاتيح ...

الخاصية counter-reset

الخاصية counter-reset في CSS تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، بينما يمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على كل العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* ضبط قيمة العداد إلى 0 */ counter-reset: my-counter; /* ضبط قيمة العداد إلى -1 */ counter-reset: my-counter -1; /* ضبط قيمة أوّل عداد إلى 1 وثاني عدّاد إلى 4 */ counter-reset: counter1 1 counter2 4; /* إلغاء عملية إعادة التعيين، وتُستخدَم لتجاوز القواعد ...

الخاصية height

الخاصية height في CSS تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. /* كلمة محجوزة */ height: auto; /* <length> أطوال */ height: 120px; height: ...

العنصر ‎::after‎

العنصر الزائف ‎::after‎ في CSS (أي pseudo-element) هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. a::after { content: "→"; } الشكل العام لهذا المحدد: ::after :after لاحظ أنَّ CSS3 أضافت الشكل ‎::after‎ (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل ‎:after‎ المُضاف في CSS2 أيضًا. العناصر الزائفة الموّلدة من ‎::after‎ و ‎::before ستكون محتواة داخل صندوق العنصر، وبالتالي لا يمكن تطبيقهما ...

العنصر ‎::before‎

العنصر الزائف ‎::before‎ في CSS (أي pseudo-element) هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. a::before { content: "♥"; } الشكل العام لهذا المحدد: ::before :before لاحظ أنَّ CSS3 أضافت الشكل ‎::before (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل ‎:before المُضاف في CSS2 أيضًا. العناصر الزائفة الموّلدة من ‎::after‎ و ‎::before ستكون محتواة داخل صندوق العنصر، وبالتالي لا يمكن تطبيقهما ...

عرض (250 السابقة | 250 التالية) (20 | 50 | 100 | 250 | 500).