هذا موضوع لمشاركة الحيل (Hacks) التي تعلمتها عبر الأنترنت أو أخبرك بها صديق مـا، وأغلب مطوري الويب لا يعرفونها.
ماهي أهم حيل HTML/JS/CSS التي لا يعرفها أغلب مطوري الويب؟
سؤال صعب، حدد في أيّ مجال
صرت أعرف الكثير من الحيل في مختلف المجالات، من تصاميم grids إلى تصاميم الأزرار
آخر حيلة استعملتها (البارحة) هي بتمديد خلفية شيء ما إلى أكبر من ذلك الشيء
مثلا فلنقل أن لديك عنصر بعرض 300 بكسل، والمحتوى الذي فيه سيكون بعرض 300 بكسل. لكن تريد من لون الخلفية أن يكون مثلا 600 بكسل. وهذا نظريا مستحيل لأن العنصر بحد ذاته هو 300
فتأتي هنا خدعة بسيطة لتمديد الخلفية وبقاء العناصر في حدود 300
element {
width: 300px;
padding-left: 150px;
padding-right: 150px;
margin-left: -150px;
margin-right: -150px;
بهذه الطريقة أصبح حجم العنصر فعليا 600 بكسل، غالبا ما أستعملها لتمديد خلفية شيء ما إلى كامل حجم الصفحة، بينما أبقي العناصر في حدود معينة
يعني تكون صورة محددة بقياس معين.. وأريدها أن تخرج عن ذاك القياس وتصير تخرج عن الحدود/الإطار ..
لا عليـك .. سوف أنقلها من عمل جاهز :v = أفهمها ثم أنقلها
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
كود الـCSS هذا الذي علمت بأمره حديثا.. يقوم بأشياء مذهلة! فعندما تكون بصدد تصميم موقع، لكن تواجهك مشكلة أن خلفيات كل العناصر بيضاء/شفافة/ بها نفس الصورة. تماما مثل موقع http://time.com
بعد إضافة كود الCSS السابق، تصير الصفحة هكذا
ويصير بإمكانك تحديد حجم العناصر والmargin والـ padding
الحيلة الثانية هـي إمكانية عمل ملف HTML مباشرة عبر المتصفح، من خلال الكود التالي الذي يجب أن تضعه في شريط العناوين (Barre d'adresse)
data:text/html,<h1>Hello, world!</h1>
الحيلة الثالثة تمكنك من إجراء «عمليات حسابية» مباشرة في الـ CSS مثال:
background-position: calc(100% - 50px) calc(100% - 20px);
الحيلة الثالثة تمكنك من تحويل صفحة المتصفح إلى صفحة نوتپاد إن صح التعبير، إفتح نافذة جديد وألصق بها الكود التالي ثم إضغط على enter
data:text/html, <html contenteditable>
background-position: calc(100% - 50px) calc(100% - 20px);
هذه ليست حيلة بل دالة جديدة، دوما أردت استعمالها ولكن بسبب نقص الدعم في المتصفحات للحظة، قررت عدم استخدامها حاليا
إذا كني سنسميها حيلة، فلدي الكثير من الحيل في هذا الخصوص
أكثر الحيل انتشارا على الانترنت، رغم أن الكثير لا يعرف استخداماه بشكل جيد
وهي توسيط عنصر بشكل عمودي إذا كنا نعلم ارتفاع هذا العنصر ولا نعلم ارتفاع العنصر الذي هو محتوى فيه
وهي بإعضاء العنصر بعض القيم مثل
.element {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
ما يجهله أغلب الناس ولا يلاحظون هو أنّ العنصر الأب له يجب أن يكون ب position: relative
هذه الخدعة لصنع مثلث صغير، غير القيم لتغير لأي جهة ينظر المثلث (غير في أي جهة يكون الإطار)
.element:before {
width: 0;
height: 0;
border-left: 8px solid transparent; /* this line, along with the two lines below are CSS hacks to create a triangle */
border-right: 8px solid transparent;
border-bottom: 8px solid #FFFFFF;
content: "";
position: absolute;
}
top:50% سوف تدفع الجسم إلى الوسط. ولكن ليس المركز، بل أعلى نقطة في الجسم ستكون في الوسط
نحن نستعمل margin-top لنرجع العنصر إلى الأعلى بنفص ارتفاعه حتى يكون المركز في الوسط تماما
التعليقات