القائمة الرئيسية

الصفحات

 أول 4 سؤالا شائعا في مقابلة شخصية CSS

CSS ، Cascading Style Sheets ، هي لغة ورقة أنماط بسيطة وسهلة التعلم. يتعلق الأمر بشكل أساسي بكيفية تمثيل عناصر HTML على الشاشة. يتم استخدامه بشكل أساسي لإضافة الأنماط إلى صفحات الويب. إنها واحدة من المفضلة للمطورين والمصممين لإضافة أنماط إلى صفحات الويب. لذلك ، سنتحدث اليوم عن أكثر 4 سؤالًا تم طرحها على CSS.

4 الأسئلة الأكثر شيوعًا في CSS

1. كيفية تعطيل تمييز النص المحدد؟
In English
1. How to disable text selection highlighting?

إجابة:
وفقًا لـ Can I use ، يتم دعم تحديد المستخدم حاليًا في جميع المتصفحات باستثناء Internet Explorer 9 والإصدارات السابقة (ولكن للأسف لا يزال بحاجة إلى بادئة البائع). جميع أشكال CSS الصحيحة هي:
In English 
Answer:

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 
and earlier versions (but sadly still needs a vendor prefix). All of the correct CSS variations are:
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>



إجابة بديلة:

في معظم المتصفحات ، يمكن تحقيق ذلك باستخدام اختلافات الملكية في خاصية تحديد مستخدم CSS ، والتي تم اقتراحها في الأصل ثم تم التخلي عنها في CSS 3 وتم اقتراحها الآن في CSS UI المستوى 4

In English
Alternative Answer:

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS 3 and now proposed in CSS UI Level 4:
*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
بالنسبة إلى Internet Explorer <10 و Opera <15 ، ستحتاج إلى استخدام السمة غير القابلة للتحديد للعنصر الذي ترغب في عدم تحديده.

يمكنك تعيين هذا باستخدام سمة في HTML:
In English
For Internet Explorer < 10 and Opera < 15, you will need to use the unselectable attribute of the element you wish to be unselectable.

You can set this using an attribute in HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>

للأسف لم يتم توريث هذه الخاصية ، مما يعني أنه يجب عليك وضع سمة في علامة البداية لكل عنصر داخل <div>.
إذا كانت هذه مشكلة ، فيمكنك بدلاً من ذلك استخدام جافا سكريبت للقيام بذلك بشكل متكرر لأحفاد العنصر
In Engish
Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the <div>.

If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

يجب إعادة تشغيل اجتياز الشجرة هذا كلما تمت إضافة عنصر جديد إلى الشجرة ، ولكن يبدو أنه من الممكن تجنب ذلك عن طريق إضافة معالج حدث mousedown الذي يعين غير قابل للتحديد على هدف الحدث. راجع http://jsbin.com/yagekiji/1 للحصول على التفاصيل. هذا لا يزال لا يغطي كل الاحتمالات.
في حين أنه من المستحيل بدء التحديدات في عناصر غير قابلة للتحديد ، في بعض المتصفحات (Internet Explorer و Firefox ، على سبيل المثال) لا يزال من المستحيل منع التحديدات التي تبدأ قبل وتنتهي بعد
عنصر غير قابل للتحديد دون جعل المستند بأكمله غير قابل للتحديد.
In Engish
This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems that it is possible to avoid this by adding a mousedown event handler that sets unselectable on the target of the event. See http://jsbin.com/yagekiji/1 for details. This still doesn’t cover all possibilities.


While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it’s still impossible to prevent selections that start before and end after the
unselectable element without making the whole document unselectable.

2. كيفية التوسيط أفقيا a

2. How to horizontally center a

داخل الآخر
<div>
باستخدام CSS؟
الإجابة: يمكنك تطبيق CSS هذا على <div> الداخلي:
within another
<div>
using CSS?
.Answer: You can apply this CSS to the inner <div
#inner {
  width: 50%;
  margin: 0 auto;
}
بالطبع ، ليس عليك ضبط العرض على 50٪. أي عرض أقل من المحتوي <div> سيعمل. الهامش: 0 تلقائي هو ما يفعله التوسيط الفعلي.

إذا كنت تستهدف Internet Explorer 8 (والإصدارات الأحدث) ، فقد يكون من الأفضل أن يكون لديك هذا بدلاً من ذلك:
Of course, you don’t have to set the width to 50%. Any width less than the containing <div> will work. 
The margin: 0 auto is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead
#inner {
  display: table;
  margin: 0 auto;
}
سيجعل مركز العنصر الداخلي أفقيًا ويعمل دون تحديد عرض محدد.

مثال العمل هنا:
It will make the inner element center horizontally and it works without setting a specific width.

Working example here
#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

3. كيفية تغيير لون العنصر النائب لإدخال HTML5 باستخدام CSS؟

3. How to change an HTML5 input’s placeholder color with CSS؟

إجابة:

هناك ثلاث تطبيقات مختلفة: العناصر الزائفة ، والفئات الزائفة ، ولا شيء.

يستخدم WebKit و Blink (Safari و Google Chrome و Opera 15+) و Microsoft Edge عنصرًا زائفًا: :: - webkit-input-placeholder. [المرجع]
يستخدم Mozilla Firefox 4 إلى 18 فئة زائفة:: -moz-placeholder (نقطتان واحدة). [المرجع]
يستخدم Mozilla Firefox 19+ عنصرًا زائفًا: :: - moz-placeholder ، لكن المحدد القديم سيظل يعمل لبعض الوقت. [المرجع]
يستخدم Internet Explorer 10 و 11 فئة زائفة:: -ms-input-placeholder. [المرجع]
أبريل 2017: تدعم معظم المتصفحات الحديثة العنصر pseudo-element :: placeholder [المرجع]
لا يدعم Internet Explorer 9 والإصدارات الأقدم سمة العنصر النائب على الإطلاق ، بينما لا يدعم Opera 12 والإصدارات الأقل أي محدد CSS للعناصر النائبة. النقاش حول أفضل تطبيق لا يزال مستمراً. لاحظ أن العناصر الزائفة تعمل كعناصر حقيقية في Shadow DOM.


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

انظر المحددات المستوى 3:
Answer: 


There are three different implementations: pseudo-elements, pseudo-classes, and nothing.


WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. [Ref]
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. [Ref]
April 2017: Most modern browsers support the simple pseudo-element ::placeholder[Ref]
Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders. The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM.


A padding on an input will not get the same background color as the pseudo-element. CSS selectors User agents are required to ignore a rule with an unknown selector.


See Selectors Level 3:

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

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">



ملاحظات الاستخدام

احرص على تجنب التناقضات السيئة. يبدو أن العنصر النائب لمتصفح Firefox يتخلف بشكل افتراضي مع تعتيم منخفض ، لذلك تحتاج إلى استخدام التعتيم: 1 هنا.
لاحظ أن نص العنصر النائب يتم اقتطاعه فقط إذا لم يكن مناسبًا - حدد حجم عناصر الإدخال في em واختبرها باستخدام إعدادات حجم الخط الأدنى الكبيرة. لا تنس الترجمات: تحتاج بعض اللغات إلى مساحة أكبر للكلمة نفسها.
يجب أيضًا اختبار المتصفحات التي تدعم HTML للعنصر النائب ولكن بدون دعم CSS لذلك (مثل Opera).
تستخدم بعض المتصفحات CSS افتراضيًا إضافيًا لبعض أنواع الإدخال (البريد الإلكتروني ، البحث). قد تؤثر هذه على العرض بطرق غير متوقعة. استخدم الخصائص -webkit-المظهر و -moz-المظهر لتغيير ذلك. مثال:

[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4. كيفية تعيين الحشوة الخلوية وتباعد الخلايا في CSS؟

4. How to set cellpadding and cellspacing in CSS؟

إجابة:

للتحكم في "الحشو الخلوي" في CSS ، يمكنك ببساطة استخدام الحشو على خلايا الجدول. على سبيل المثال لمدة 10 بكسل من "الحشوة الخلوية":

td { 
    padding: 10px;
}

table { 
    border-spacing: 10px;
    border-collapse: separate;
}



ستسمح هذه الخاصية أيضًا بمسافات أفقية ورأسية منفصلة ، وهو أمر لا يمكنك فعله باستخدام "تباعد الخلايا" في المدرسة القديمة.

المشكلات في IE <= 7

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


إذا كنت تحاول التخلص من تباعد الخلايا (أي ، تباعد الخلايا = "0") ، فيجب أن يكون لطي الحدود نفس التأثير: لا توجد مسافة بين خلايا الجدول. هذا الدعم هو عربات التي تجرها الدواب ، على الرغم من ذلك ، لأنه لا يتجاوز سمة HTML موجودة لتباعد الخلايا على عنصر الجدول.

باختصار: بالنسبة إلى المستعرضات التي لا تعتمد على Internet Explorer 5-7 ، فإن تباعد الحدود هو الذي يعالجك. بالنسبة لبرنامج Internet Explorer ، إذا كان وضعك مناسبًا تمامًا
(تريد 0 تباعد بين الخلايا ولم يتم تعريفه في الجدول بالفعل) ،
يمكنك استخدام طي الحدود: الانهيار.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

ملاحظة: للحصول على نظرة عامة رائعة على خصائص CSS التي يمكن للمرء تطبيقها على الجداول وأي متصفحات ، راجع صفحة Quirksmode الرائعة هذه.
In English
Answer: 

For controlling “cellpadding” in CSS, you can simply use padding on table cells. E.g. for 10px of “cellpadding”:


td { 
    padding: 10px;
}
For “cellspacing”, you can apply the border-spacing CSS property to your table. E.g. for 10px of “cellspacing”:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school “cellspacing”. 

Issues in IE <= 7 

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. “Almost” because these browsers still support the border-collapse property, which merges the borders of adjoining table cells.



If you’re trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right
(you want 0 cellspacing and your table doesn’t have it defined already),
you can use border-collapse:collapse.


table { 
    border-spacing: 0;
    border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see 
this fantastic Quirksmode page.

5. هل هناك محدد CSS رئيسي؟

5. Is there a CSS parent selector؟

الاجابة ستكون في المقال تالي بينما اذا اعجبك المقال شاركه مع اصدقائك لتعم الفائدة شكرا جزيلا!

هل اعجبك الموضوع :

تعليقات