تکنیک های ضروری HTML ، CSS و JavaScript

نویسنده: Monica Porter

تاریخ ایجاد: 22 مارس 2021

تاریخ به روزرسانی: 17 ممکن است 2024

ویدیو: HTML، CSS و جاوا اسکریپت در 30 دقیقه

محتوا

چیدمان
پاک کردن
اندازه جعبه
چند ستونی
محاسبات
سبک
شفافیت
فیلترها
جایگزینی تصویر
فیلم پاسخگو
عملکرد
به راحتی عناصر را انتخاب کنید
ایجاد آرایه های جدید
اشیا سند و پنجره را تمیز کنید
این را دوست داشتید؟ اینها رو بخون!

این مقاله برای اولین بار در شماره 234 مجله .net منتشر شد - پرفروش ترین مجله جهان برای طراحان و توسعه دهندگان وب.

یک تکنیک ، در هسته اصلی خود ، روشی برای انجام یک کار است و با توجه به توسعه دهندگان و طراحان پیشگام ، وظایف زیادی داریم. با این گفته ، ما غالباً فراموش می کنیم که این منظره چقدر تغییر کرده است. از سال 2002 تا 2010 جامعه ما دچار پوسیدگی کد و منابع بود و مانع عملکرد و قابلیت نگهداری می شود. برای غلبه بر این ، ما مجموعه ای از نکات ، ترفندها و هک ها را که "تکنیک" لقب داده ایم ، ایجاد کردیم. ما هنوز در حال انجام وظایف بودیم ، نه به کارآمدترین روش.

با انجام یک 360 ، در چند سال گذشته شاهد اجرای استانداردها و استانداردهای بهتری هستیم که به عنوان یک جامعه قادر به توسعه to تکنیک های جدیدتر و پیشرفته تر هستیم. این چشم انداز جدید همان "وب مدرن" است.

همانطور که وب 2.0 'راکد و گیج کننده شد ، وب مدرن نیز چنین خواهد شد. بهش وقت بده همانطور که گفته شد ، در حال حاضر ، ما می توانیم از این اصطلاح استفاده کرده و سو استفاده کنیم تا زمانی که درک مشترکی از آنچه که آن را نشان می دهد وجود داشته باشد.

در سال 2010 مشخصات HTML5 وارد بازار شد و یک محیط وب کاملاً نیمه استاندارد را ارائه داد. مرورگرهایی مانند Opera ، Firefox ، Chrome و Safari این موج جدید را پذیرفتند و تیم های توسعه دهنده خود را به محدودیت های جدیدی از پیاده سازی استانداردها و کاوش API رساندند. برای اینکه بتوانید در مورد چگونگی "پردازنده" بودن این مرورگرها ایده بگیرید ، تصاویر www.html5readiness.com را در مورد تغییر پشتیبانی HTML5 بررسی کنید.

نگران عدم پشتیبانی در اینترنت اکسپلورر باشید. ما می توانیم به لطف Google Chrome Frame با این مسئله مقابله کنیم. از آنجا که گوگل آن را در سال 2010 معرفی کرد ، به مکانیزم اصلی پشتیبانی برای Internet Explorer تبدیل شده است. تمام نسخه های اینترنت اکسپلورر را می توان با Chrome Frame هدف قرار داد ، که باعث می شود کاربر جدید افزونه ای را بارگیری کند که وب سایت های انتخاب شده را با نسخه سبک کروم در داخل اینترنت اکسپلورر ارائه می دهد. برای اجرای Chrome Frame ، متای زیر را در برچسب head> سایت خود اضافه می کنیم.

meta http-Equ = "X-UA-Compatible" content = "chrome = 1" />

از اینجا می توانیم از کاربران IE بخواهیم که افزونه را نصب کنند ، اگر از قبل نصب نشده است ، با استفاده از JavaScript:

نوع اسکریپت = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFI نصب کنید.
min.js "> / اسکریپت>
اسکریپت>
window.onload = تابع () {
CFInstall.check ({
حالت: "همپوشانی" ،
مقصد: "http://www.yourdomain.com"
});
};
/ اسکریپت>

مقصد را می توان تنظیم کرد تا کاربر پس از نصب افزونه به پیوند خاصی ارسال شود. احتیاط: هرچند Chrome Frame روشی را برای توسعه دقیق مرورگرهای مدرن به ما می دهد ، اما نباید فراموش کنیم که کاربر در صورت عدم تمایل این گزینه را بارگیری نمی کند. اگر آنها این کار را نکردند و شما ملزم به ارائه پشتیبانی از یک یا نسخه های مختلف اینترنت اکسپلورر هستید ، باید با تجربیات خود ، مرور زمان بیشتری را صرف جستجوی آنچه می توانید و نمی توانید ارائه دهید ، کنید..

با استفاده از این کد ، زمینه کاملاً مساوی تری فراهم می شود تا بتوانید روی وب پشته مدرن ایجاد کنید ، می توانیم با خیالی آسوده به جلو حرکت کنیم. ممکن است بخاطر داشته باشید که برای ایجاد ساختار صحیح در مرورگر متقابل سایت خود ، ایجاد تعداد بیشماری هک مخصوص مرورگر ، ایجاد تعداد بیشماری از عناصر خالی برای استفاده در تصاویر قطعه قطعه شده یا حتی نوشتن کد جاوا اسکریپت بیش از حد شفاف یا زائد برای بدست آوردن ساده ترین کارایی همه این دردها به نوعی همان مشکلاتی هستند که امروز نگران آنها هستیم. ما هنوز در حال مبارزه برای کنترل بیشتر و ابزارهای بهتر برای مبارزه با طرح ، سبک و عملکرد هستیم اما در سطح بالغ.

چیدمان

پاک کردن

شناور بودن یک عنصر دوباره در CSS 2.1 معرفی شد ، اما هرگز کاملاً مشخص نشد که راه حل کاملی باشد که امیدوار بودیم. یکی از بزرگترین مشکلات حفظ ابعاد عنصر والدین هنگام شناور کردن عنصر کودک بود. برای پرداختن به این موضوع ، تکنیک روشن سازی ایجاد شد.

از HTML زیر استفاده کنید:

div>
div> ... / div>
div> ... / div>
/ div>

این تکنیک توسط نیکلاس گالاگر نوشته شده است:

. پاک کردن: قبل ،
.clearfix: بعد از {
محتوا: " "؛
نمایش: جدول؛
}
.clearfix: بعد از {
روشن: هر دو؛
}
.clearfix {
* بزرگنمایی: 1؛
}

اگر برای شروع پروژه های خود از HTML5Boilerplate استفاده می کنید ، در حال حاضر این نسخه از روش پاک کردن را کاملاً پخته کرده اید.

اندازه جعبه

سال ها بود که توسعه دهندگان بحث می کردند که کدام یک از مدل های جعبه منطقی تر است. حالت Quirks vs Standards واقعاً به این معنا بود: ‘آیا بعد از تنظیم ، هنگام اعمال حاشیه و بالشتک ، ابعاد یک عنصر تغییر می کند یا خیر.

اکنون کاملاً توافق شده است که منطقی تر است که حاشیه ها و بالشتک ها فضای موجود درون یک عنصر را از بین ببرند و به عرض یا ارتفاع عنصر اضافه نکنند. این بحث با اجرای گسترده اندازه گیری جعبه بی اهمیت شده است. مرورگر نشانه های خود را به جای بالعکس از شما می گیرد.

رواج یافته توسط کریس کویر و پل ایرلندی ، یک تکنیک جامع را می توان با موارد زیر اجرا کرد:

* {
-webkit-box-sizing: حاشیه-جعبه؛
-moz-box-sizing: حاشیه-جعبه؛
جعبه اندازه: حاشیه جعبه؛
}

با توجه به بازدیدهای بالقوه عملکرد ، در مورد استفاده از انتخابگر * در CSS بحث شده است. اگر بهینه سازی بیش از حد سایر جنبه های وب سایت / برنامه خود را نداشته باشید ، این نوع ادعاها بیهوده است. استفاده از border-box باعث می شود مرورگر padding و حاشیه ها را در داخل فضای موجود اضافه کند. از حالت استاندارد می توان با تنظیم اندازه اندازه جعبه بر جعبه محتوا استفاده کرد.

چند ستونی

وب از شکل و نوع نوشتاری بسیار الهام گرفته است. متأسفانه ، ما در مرحله پوسته گیر کردیم. برخی از این موضوعات با مشخصات مدت زیادی در انتظار Paged-Media و CSS Regions در حال جلب توجه هستند. با این اوصاف ، اولین گامهایی که به سمت چیدمان مجله مانند بیشتر برمی گردد ، زمانی که مرورگرها شروع به اجرای چند ستون CSS کردند. کد تولید این اثر بسیار ساده است:

پ {
-webkit-column-count: 2؛
-moz-column-count: 2؛
تعداد ستون: 2؛
}

می توانید در مورد مشخصات چند ستونی CSS3 و همچنین بازگرداندن جاوا اسکریپت که می توانید برای هر مرورگری بدون پشتیبانی استفاده کنید ، از وبلاگ A List Apart بیشتر بدانید.

محاسبات

محاسبه ابعاد می تواند سخت باشد. در گذشته ، ما راهی برای انجام هر نوع محاسبه واحد نداریم ، چه رسد به محاسبات واحد مخلوط. این همه به لطف کالک تغییر کرده است. ایجاد یک اثر پر شده که بر عرض عناصر اولیه تأثیر نمی گذارد و یا از چیزی مانند اندازه جعبه استفاده نمی کند: border-box؛ تا همین اواخر فقط با افزودن عناصر اضافی حاوی امکان پذیر بود.

.پاد شده {
حاشیه: 0 خودکار؛
موقعیت: نسبی؛
عرض: -webkit-calc (100٪ - (20px * 2))؛
عرض: -moz-calc (100٪ - (20px * 2))؛
عرض: calc (100٪ - (20px * 2))؛
}

calc () از محاسبه عرض مناسب بر اساس عرض والد .padded و منهای یک padding 20px تعریف شده مراقبت می کند. من این را برای هر دو طرف عنصر خود ضرب کردم ، مرکز این عنصر را با استفاده از موقعیت نسبی و خودکار حاشیه چپ و راست قرار داد.

سبک

شفافیت

دریافت سبک صحیح یک عنصر همیشه به نوع ابزاری که در CSS در دسترس ما بوده است بستگی دارد. شفافیت یکی از اولین گزینه های پشتیبانی است که در اوایل تا اواسط دهه 2000 با آن روبرو می شوید.

با ظهور HTML5 و تلاشهای متمرکزتر در استاندارد ، مرورگرها از ویژگی کدورت پیاده سازی استاندارد می کنند و طبق مشخصات جدید ماژول رنگ ، پشتیبانی کانال آلفا را نشان می دهند. این شامل رهنمودهای RGBA و HSLA است.

آ {
رنگ: rgba (0،255،0،0.5)
زمینه: rgba (0،0،255،0.05)
مرز: rgba (255،0،0،0،5)
}

هر کجا مقادیر HEX پیدا کنید می توانید از رنگهای RGBA یا HSLA استفاده کنید. همچنین یک لیست گسترده از رنگ های سرگرم کننده با نام های مشخص شده وجود دارد که می توانید در مشخصات آنها را بررسی کنید. این موارد وقتی به کار می آیند که می خواهید ترکیبی پویا بین عناصر ایجاد کنید.

فیلترها

فیلترهای CSS بسیار مهیج هستند. داشتن توانایی تغییر پویا در ظاهر و احساس عناصر موجود در یک صفحه بدون نیاز به افزونه های شخص ثالث شگفت آور است و به شما در کاهش بسیار زیاد زمان شما در فتوشاپ کمک می کند.

img src = "market.webp">
img {
-وب-فیلتر: مقیاس خاکستری (100٪) ؛
}

فیلترهای CSS فقط در حال حاضر در مرورگرهای WebKit پشتیبانی می شوند ، بنابراین استفاده از آنها باید از نوع افزودنی باشد و وابسته نباشد. بیشتر بخوانید اینجا

جایگزینی تصویر

جایگزینی متن با تصاویر از مدت ها قبل وجود داشته است. متأسفانه ، جدیدترین و پیچیده ترین تکنیک های جایگزینی تصویر ، اشکالاتی در دسترسی ، هنوز وجود دارد. اما اخیراً دو نفر ظاهر شده اند که بسیار هوشمندانه و در حقوق خود بی نظیر هستند. اولین بار توسط اسکات کلمن نوشته شده است:

h1 class = 'hide-text'> آرم وب سایت من / h1>
متن پنهان {
متن-تورفتگی: 100٪؛
فضای سفید: nowrap؛
سرریز: پنهان
}

مورد دوم را نیکلاس گالاگر نوشت:

متن پنهان {
قلم: 0/0 a؛
text-shadow: هیچ؛
رنگ: شفاف
}

فیلم پاسخگو

رساندن مقیاس به درستی رسانه ها در یک محیط واکنش پذیر می تواند چالش برانگیز باشد. با داشتن هرچه بیشتر وب سایت هایی که به طراحی سازگار احترام می گذارند ، مدیریت ابعاد و نسبت ابعاد عناصر به درستی ضروری است.

فیلم جاسازی شده یکی از چالش برانگیزترین انواع رسانه ها به دلیل روشی است که سرویس های شخص ثالث در ارائه محتوا ارائه می دهند. تعبیه شده در YouTube معمولاً به این شکل است:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

سپس عنصر iframe شامل یک شی Flash یا عنصر تعبیه شده است. استفاده از چیزی مانند iframe {maxwidth: 100٪؛ } کار نمی کند زیرا عناصر تو در تو با تغییر عرض تغییر اندازه مناسبی نمی دهند. بنابراین ، ما باید برخی از ترفندها را انجام دهیم.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

بسته بندی iframe در یک عنصر دیگر به ما کنترلی می دهد که برای افزودن قابلیت پاسخگویی مناسب به ویدیو نیاز داریم.

.video {
موقعیت: نسبی؛
بالشتک پایین: 56.25٪؛
قد: 0؛
سرریز: پنهان
}
iframe تصویری ،
شی .video ،
.video embed {
موقعیت: مطلق؛
بالا: 0؛
سمت چپ: 0؛
عرض: 100٪
قد: 100٪
}

تنظیم لایه زیرین بسته بندی .video: 56.25٪؛ جادو در این روش است. استفاده از padding به معنای درصد استفاده شده بر اساس عرض والدین است. .56 .25٪ 'نسبت ابعادی 16: 9 ایجاد می کند. اگر می خواهید ریاضیات را خودتان انجام دهید. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (این درصد ما است).

عملکرد

به راحتی عناصر را انتخاب کنید

با محبوبیت تعدادی از کتابخانه های جاوا اسکریپت (به عنوان مثال jQuery) ، کمیته ECMAScript و استانداردهای W3C یکی از عناصر اصلی توسعه دهندگان عملکرد را که بومی ندارند ، مورد توجه قرار دادند - انتخاب عنصر خوب. روشهایی مانند getElementByID () و getElementByClassName () سریع بودند اما به انعطاف و قدرتمندی موتورهای انتخابی از جامعه توسعه دهنده نبودند. querySelectorAll () روش بدن استاندارد برای تقلید از برخی از انعطاف پذیری در روش انتخاب بومی بود.

var items = document.querySelectorAll ('# header .item')؛

querySelectorAll () را می توان از انتخابگرهای متعدد و مخلوط عبور داد. در این باره بیشتر بخوانید.

ایجاد آرایه های جدید

تکرار یک آرایه چیزی است که نوشتن آن خسته کننده است. نوشتن و بازنویسی برای حلقه ها () جالب نیست. در نسخه 1.6 JS ، با استفاده از روش map () پشتیبانی از روشی آسان برای تکرار و ایجاد آرایه جدید از روش دیگر فراهم شد.

var people = ['Heather'، 'James'، 'Kari'، 'Kevin']؛
var استقبال می کند = people.map (تابع (نام) {
بازگشت 'سلام' + نام + '!'؛
});

با اجرای این کد ، اگر بخواهیم console.log (با استقبال) مواجه شوید که می بینید استقبال می شود ، آرایه جدیدی است [‘سلام هیدر!’ ، ‘سلام جیمز!’ ، ‘سلام کاری!’ ، ‘سلام کوین!’ ]

اشیا سند و پنجره را تمیز کنید

کتابخانه های جاوا اسکریپت شخص ثالث مستعد ابتلا به اشیا document سند و پنجره بومی هستند. این می تواند برای دیگر کتابخانه های شخص ثالث و توسعه دهنده از جمله آنها مشکل ساز شود. به عنوان هر یک از طرفین ، با ایجاد نمونه جدیدی از آنها اطمینان حاصل کنید که با نسخه تمیز هر دو شی کار می کنید. بهترین راه برای این کار ایجاد یک عنصر iframe ، قرار دادن آن در DOM و ذخیره موارد جدید آن اشیا است.

var iframe = document.createElement ('iframe')؛
iframe.style.display = "هیچ"؛
iframe = document.body.appendChild (iframe)؛
var _window = iframe.contentWindow؛
var _document = iframe.contentDocument ||
iframe.contentWindow.document؛
document.body.removeChild (iframe)؛

اگرچه پیشرفت های زیادی در پشته وب ایجاد شده است ، اما همچنان به جمع آوری و پیچیده مجموعه فناوری ما برای پاسخگویی به چالش هایی که در طرح ، سبک و عملکرد پروژه ما با آن روبرو هستیم ، هنوز بسیار مهم است. برای حفظ اکوسیستم رشد خوب ، ما باید ارگان های استاندارد و فروشندگان مرورگر را تشویق کنیم تا ضمن تقسیم دانش خود با توسعه دهندگان و طراحان دیگر ، با مشخصات جدید و پیاده سازی ویژگی های نوآورانه به پیشرفت ادامه دهند. بینش بیشتر ، هک کمتر.

دارسی کلارک یک توسعه دهنده برنده جایزه ، بنیانگذار شرکت قالب وردپرس Themify و گردآورنده معاملات روزانه DealPage و عضوی از تیم jQuery است. او در Polar Mobile به عنوان یک توسعه دهنده ارشد UX کار می کند.