CSS

مرورگر بر اساس ویژگی قوانین CSS تعیین می کند که چه استایل هایی را روی یک عنصر نمایش دهد. ما فرض می کنیم که مرورگر قبلاً قوانینی را که با یک عنصر خاص مطابقت دارند، تعیین کرده است. در میان قوانین منطبق، ویژگی، چهار مقدار جدا شده با کاما، a, b, c, d برای هر قانون بر اساس موارد زیر محاسبه می شوند:

1. a این است که آیا استایل های درون خطی استفاده می شوند یا خیر. اگر اعلان ویژگی یک استایل درون خطی روی عنصر باشد، a برابر با 1 است، در غیر این صورت 0.
2. b تعداد انتخابگرهای ID است.
3. c تعداد کلاس ها، ویژگی ها و انتخابگرهای شبه کلاس است.
4. d تعداد تگ ها و انتخابگرهای شبه عناصر است.

ویژگی حاصل یک امتیاز نیست، بلکه یک ماتریس از مقادیر است که می تواند ستون به ستون مقایسه شود. هنگام مقایسه انتخابگرها برای تعیین کدام یک بالاترین ویژگی را دارد، از چپ به راست نگاه کنید و بالاترین مقدار را در هر ستون مقایسه کنید. بنابراین یک مقدار در ستون b مقادیر در ستون های c و d را نادیده می گیرد، مهم نیست که چه باشند. به همین ترتیب، ویژگی 0,1,0,0 بیشتر از 0,0,10,10 خواهد بود.

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

من قوانین CSS را با ویژگی کم می نویسم تا در صورت لزوم به راحتی قابل نادیده گرفتن باشند. هنگام نوشتن کد کتابخانه کامپوننت UI CSS، مهم است که آنها ویژگی های کمی داشته باشند تا کاربران کتابخانه بتوانند آنها را بدون استفاده از قوانین CSS بسیار پیچیده فقط به خاطر افزایش ویژگی یا توسل به !important نادیده بگیرند.

• بازنشانی - بازنشانی به معنای حذف تمام استایل های پیش فرض مرورگر روی عناصر است. به عنوان مثال، حاشیه ها margins، فاصله ها paddings، اندازه فونت ها font-sizes همه عناصر بازنشانی می شوند تا یکسان باشند. شما باید استایل دهی را برای عناصر تایپوگرافی رایج دوباره اعلام کنید.
• عادی سازی - عادی سازی استایل های پیش فرض مفید را به جای unstlying همه چیز حفظ می کند. همچنین باگ ها را برای وابستگی های رایج مرورگر اصلاح می کند.

من زمانی بازنشانی را انتخاب می کنم که طراحی سایت بسیار سفارشی یا غیر متعارف داشته باشم به طوری که نیاز به انجام بسیاری از استایل دهی های خودم داشته باشم و نیازی به حفظ هیچ استایل پیش فرضی نباشد.

Float یک ویژگی موقعیت یابی CSS است. عناصر شناور شده بخشی از جریان صفحه باقی می مانند و بر موقعیت سایر عناصر تأثیر می گذارند (به عنوان مثال، متن در اطراف عناصر شناور جریان می یابد)، برخلاف عناصر position: absolute که از جریان صفحه حذف می شوند.

ویژگی CSS clear می تواند برای قرار گرفتن در زیر عناصر شناور شده left/right/both استفاده شود.

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

هک .clearfix از یک شبه انتخابگر CSS هوشمند ::after برای پاک کردن شناورها استفاده می کند. به جای تنظیم overflow روی والد، یک کلاس اضافی clearfix را به آن اعمال می کنید. سپس این CSS را اعمال کنید:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

به عنوان جایگزین، ویژگی overflow: auto یا overflow: hidden را به عنصر والد بدهید که یک زمینه فرمت بندی بلوک جدید در داخل فرزندان ایجاد می کند و برای شامل شدن فرزندان خود گسترش می یابد.

ویژگی z-index در CSS ترتیب پشته سازی عمودی عناصر همپوشان را کنترل می کند. z-index فقط روی عناصری که مقدار position آنها static نیست، تأثیر می گذارد.

بدون هیچ مقدار z-index، عناصر به ترتیبی که در DOM ظاهر می شوند، روی هم قرار می گیرند (پایین ترین در همان سطح سلسله مراتب در بالا ظاهر می شود). عناصر با موقعیت دهی غیر استاتیک (و فرزندانشان) همیشه در بالای عناصر با موقعیت دهی استاتیک پیش فرض ظاهر می شوند، صرف نظر از سلسله مراتب HTML.

یک زمینه پشته سازی عنصری است که مجموعه ای از لایه ها را شامل می شود. در یک زمینه پشته سازی محلی، مقادیر z-index فرزندان آن نسبت به آن عنصر تنظیم می شود تا ریشه سند. لایه های خارج از آن زمینه — یعنی عناصر همزاد یک زمینه پشته سازی محلی — نمی توانند بین لایه های داخل آن قرار گیرند. اگر عنصر B روی عنصر A قرار گیرد، یک عنصر فرزند عنصر A، عنصر C، هرگز نمی تواند بالاتر از عنصر B باشد حتی اگر عنصر C دارای z-index بالاتری نسبت به عنصر B باشد.

هر زمینه پشته سازی مستقل است - پس از پشته شدن محتویات عنصر، کل عنصر در ترتیب پشته سازی زمینه پشته سازی والد در نظر گرفته می شود. تعدادی از ویژگی های CSS یک زمینه پشته سازی جدید را ایجاد می کنند، مانند opacity کمتر از 1، filter که none نیست، و transform که none نیست.

_نکته: دقیقاً چه چیزی یک عنصر را برای ایجاد یک زمینه پشته سازی واجد شرایط می کند در این مجموعه طولانی از قوانین ذکر شده است.

یک Block Formatting Context (BFC) بخشی از رندرینگ بصری CSS یک صفحه وب است که در آن جعبه های بلوکی چیده می شوند. شناورها، عناصر با موقعیت مطلق، inline-blocks، table-cells، table-caption ها، و عناصر با overflow غیر از visible (مگر زمانی که آن مقدار به viewport منتقل شده باشد) زمینه های فرمت بندی بلوک جدیدی را ایجاد می کنند.

دانستن نحوه ایجاد یک زمینه فرمت بندی بلوک مهم است، زیرا بدون انجام این کار، جعبه حاوی، فرزندان شناور را شامل نخواهد شد. این مشابه collapsing margins است، اما موذیانه تر است زیرا کل جعبه ها به روش های عجیبی فرو می ریزند.

یک BFC یک جعبه HTML است که حداقل یکی از شرایط زیر را برآورده می کند:

• مقدار float برابر با none نیست.
• مقدار position نه static است و نه relative.
• مقدار display برابر با table-cell، table-caption، inline-block، flex، یا inline-flex، grid، یا inline-grid است.
• مقدار overflow برابر با visible نیست.

در یک BFC، لبه بیرونی سمت چپ هر جعبه با لبه چپ بلوک حاوی (برای فرمت راست به چپ، لبه های راست با هم تماس دارند) تماس می گیرد.

حاشیه های عمودی بین جعبه های همسایه در سطح بلوک در یک BFC فرو می ریزند. برای اطلاعات بیشتر در مورد collapsing margins بخوانید.

• روش div خالی - <div style='clear:both;'></div>.
• روش Clearfix - به کلاس .clearfix در بالا مراجعه کنید.
• روش overflow: auto یا overflow: hidden - والد یک زمینه فرمت بندی بلوک جدید ایجاد می کند و برای شامل شدن فرزندان شناور خود گسترش می یابد.

در پروژه های بزرگ، من یک کلاس کمکی .clearfix می نوشتم و از آنها در جاهایی که نیاز داشتم استفاده می کردم. overflow: hidden ممکن است در صورتی که فرزندان بلندتر از والد باشند، آنها را قطع کند و خیلی ایده آل نیست.

CSS sprites چندین تصویر را در یک تصویر بزرگتر ترکیب می کنند. این یک تکنیک معمولاً استفاده شده برای آیکون ها است (Gmail از آن استفاده می کند). نحوه پیاده سازی آن:

1. از یک sprite generator استفاده کنید که چندین تصویر را در یک تصویر بسته بندی می کند و CSS مناسب را برای آن تولید می کند.
2. هر تصویر یک کلاس CSS مربوطه با ویژگی های background-image، background-position و background-size تعریف شده خواهد داشت.
3. برای استفاده از آن تصویر، کلاس مربوطه را به عنصر خود اضافه کنید.

مزایا:

• کاهش تعداد درخواست های HTTP برای چندین تصویر (فقط یک درخواست واحد برای هر spritesheet مورد نیاز است). اما با HTTP2، بارگذاری چندین تصویر دیگر مشکل چندانی نیست.
• بارگیری پیشرفته دارایی هایی که تا زمانی که لازم نباشند بارگیری نمی شوند، مانند تصاویری که فقط در pseudo-states های :hover ظاهر می شوند. چشمک زدن دیده نمی شود.

• پس از شناسایی مشکل و مرورگر مشکل ساز، از یک شیوه نامه جداگانه استفاده کنید که فقط زمانی که آن مرورگر خاص استفاده می شود، بارگذاری می شود. البته این تکنیک نیاز به رندرینگ سمت سرور دارد.
• از کتابخانه هایی مانند Bootstrap استفاده کنید که قبلاً این مشکلات استایل دهی را برای شما حل کرده اند.
• از autoprefixer برای اضافه کردن خودکار پیشوندهای وندور به کد خود استفاده کنید.
• از Reset CSS یا Normalize.css استفاده کنید.
• اگر از Postcss (یا یک کتابخانه transpiling مشابه) استفاده می کنید، ممکن است پلاگین هایی وجود داشته باشند که به شما امکان می دهند از سینتکس CSS مدرن (و حتی پیشنهادات W3C) استفاده کنید که آن بخش ها از کد شما را به کد ایمن مربوطه تبدیل می کند که در اهدافی که استفاده کرده اید کار خواهد کرد.

• کاهش تدریجی - عمل ساخت یک برنامه برای مرورگرهای مدرن در حالی که اطمینان حاصل می شود که در مرورگرهای قدیمی تر نیز عملکردی باقی می ماند.
• بهبود تدریجی - عمل ساخت یک برنامه برای یک سطح پایه از تجربه کاربری، اما اضافه کردن بهبودهای عملکردی زمانی که یک مرورگر از آن پشتیبانی می کند.
• از caniuse.com برای بررسی پشتیبانی از ویژگی ها استفاده کنید.
• Autoprefixer برای درج خودکار پیشوند وندور.
• تشخیص ویژگی با استفاده از Modernizr.
• استفاده از پرس و جوهای ویژگی CSS @support

این تکنیک ها مربوط به دسترسی پذیری (a11y) هستند.

• width: 0; height: 0. عنصر را به هیچ وجه در صفحه جا ندهید، در نتیجه آن را نمایش نمی دهد.
• position: absolute; left: -99999px. آن را خارج از صفحه قرار دهید.
• text-indent: -9999px. این فقط روی متن درون عناصر block کار می کند. این یک ترفند پرکاربرد و معروف است، اما با برخی معایب مانند ایجاد مشکلات عملکردی همراه است، بنابراین ممکن است بخواهید به جای آن از text-indent: 100% استفاده کنید.
• Meta tags. به عنوان مثال با استفاده از Schema.org، RDF و JSON-LD.
• WAI-ARIA. یک مشخصات فنی W3C که نحوه افزایش دسترسی پذیری صفحات وب را مشخص می کند.

حتی اگر WAI-ARIA راه حل ایده آل باشد، من روش موقعیت دهی absolute را انتخاب می کنم، زیرا کمترین عیب را دارد، برای اکثر عناصر کار می کند و یک تکنیک آسان است.

قبل از اینکه فلکس محبوب شود (حدود سال 2014)، سیستم گرید مبتنی بر float قابل اعتمادترین بود زیرا هنوز بیشترین پشتیبانی مرورگر را در بین سیستم های جایگزین موجود (فلکس، گرید) داشت. بوت استرپ تا بوت استرپ 4 که به رویکرد مبتنی بر فلکس تغییر کرد، از رویکرد float استفاده می کرد. در حال حاضر (2020)، فلکس رویکرد توصیه شده برای ساخت سیستم های گرید است و پشتیبانی مرورگر مناسبی دارد.

برای ماجراجویان، آنها می توانند به CSS Grid Layout نگاه کنند، که از ویژگی جدید و درخشان grid استفاده می کند؛ حتی برای ساخت طرح بندی های گرید بهتر از فلکس است و در آینده راه اصلی برای انجام این کار خواهد بود.

بله. یک مثال می تواند تبدیل یک ناوبری پشته ای قرصی به یک ناوبری تب ثابت در پایین فراتر از یک نقطه شکست خاص باشد.

بله، چندین روش برای رنگ آمیزی اشکال (از جمله تعیین ویژگی‌ها روی شی) با استفاده از CSS درون‌خطی، یک بخش CSS جاسازی شده، یا یک فایل CSS خارجی وجود دارد. بیشتر SVG‌هایی که در وب پیدا می‌کنید از CSS درون‌خطی استفاده می‌کنند، اما هر نوع مزایا و معایب خاص خود را دارد.

رنگ آمیزی پایه را می توان با تنظیم دو ویژگی در گره انجام داد: fill و stroke. fill رنگ داخل شی را تنظیم می کند و stroke رنگ خط کشیده شده در اطراف شی را تنظیم می کند. می توانید از همان طرح های نامگذاری رنگ CSS که در HTML استفاده می کنید، استفاده کنید، چه نام های رنگی (یعنی red)، مقادیر RGB (یعنی rgb(255,0,0))، مقادیر Hex، مقادیر RGBA و غیره.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

fill='purple' بالا نمونه ای از یک ویژگی نمایشی است. جالب است که بر خلاف استایل های درون خطی مانند style='fill: purple' که به طور تصادفی یک ویژگی نیز هست، ویژگی های نمایشی می توانند توسط استایل های CSS تعریف شده در یک شیوه نامه نادیده گرفته شوند. بنابراین، اگر چیزی مانند svg { fill: blue; } را انجام دهید، fill بنفش که ما تعریف کرده ایم را نادیده می گیرد.

بله، چهار نوع از ویژگی های @media (از جمله screen) وجود دارد:

• all - برای همه دستگاه های نوع رسانه
• print - برای پرینترها
• speech - برای صفحه خوان ها که صفحه را با صدای بلند می خوانند
• screen - برای صفحه نمایش رایانه، تبلت، تلفن هوشمند و غیره

در اینجا مثالی از کاربرد نوع رسانه print آورده شده است:

@media print {
  body {
    color: black;
  }
}

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

متدولوژی BEM (Block Element Modifier) توصیه می کند که همه چیز یک کلاس واحد داشته باشد، و در جایی که به سلسله مراتب نیاز دارید، آن نیز در نام کلاس گنجانده می شود، این به طور طبیعی انتخابگر را کارآمد و آسان برای نادیده گرفتن می کند.

از اینکه کدام ویژگی های CSS باعث reflow، repaint و compositing می شوند آگاه باشید. از نوشتن استایل هایی که طرح را تغییر می دهند (باعث reflow می شوند) در صورت امکان خودداری کنید.

مزایا:

• CSS قابل نگهداری‌تر می‌شود.
• نوشتن انتخابگرهای تو در تو آسان است.
• متغیرها برای تم‌بندی ثابت. می‌توان فایل‌های تم را در پروژه‌های مختلف به اشتراک گذاشت.
• Mixins برای تولید CSS تکراری.
• ویژگی‌های Sass مانند حلقه‌ها، لیست‌ها و نقشه‌ها می‌توانند پیکربندی را آسان‌تر و کم‌حرف‌تر کنند.
• تقسیم کد شما به چندین فایل. فایل‌های CSS را نیز می‌توان تقسیم کرد، اما انجام این کار نیاز به یک درخواست HTTP برای دانلود هر فایل CSS دارد.

معایب:

• نیاز به ابزارهایی برای پیش‌پردازش. زمان کامپایل مجدد می‌تواند کند باشد.
• ننوشتن CSS فعلی و بالقوه قابل استفاده. به عنوان مثال، با استفاده از چیزی مانند postcss-loader با webpack، می‌توانید CSS بالقوه سازگار با آینده را بنویسید، که به شما امکان می‌دهد از چیزهایی مانند متغیرهای CSS به جای متغیرهای Sass استفاده کنید. بنابراین، شما در حال یادگیری مهارت‌های جدیدی هستید که می‌تواند در صورت استاندارد شدن (یا زمانی که استاندارد شوند) مفید باشد.

دوست داشتن:

• بیشتر مزایای ذکر شده در بالا.
• کمتر در جاوااسکریپت نوشته شده است که با Node به خوبی کار می کند.

دوست نداشتن:

• من از Sass از طریق node-sass استفاده می کنم، که یک اتصال برای LibSass است که در C++ نوشته شده است. هنگام جابجایی بین نسخه های Node، باید مکرراً آن را کامپایل مجدد کنم.
• در Less، نام متغیرها با @ پیشوند می شوند، که می تواند با کلمات کلیدی بومی CSS مانند @media، @import و قانون @font-face اشتباه گرفته شود.

از @font-face استفاده کنید و font-family را برای font-weight های مختلف تعریف کنید.

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

به عنوان مثال با این انتخابگر p span، مرورگرها ابتدا تمام عناصر <span> را پیدا می کنند و تا ریشه به سمت بالا در والد آن حرکت می کنند تا عنصر <p> را پیدا کنند. برای یک <span> خاص، به محض یافتن یک <p>، می داند که <span> مطابقت دارد و می تواند تطبیق خود را متوقف کند.

شبه عنصر CSS یک کلمه کلیدی است که به یک انتخابگر اضافه می شود و به شما امکان می دهد بخش خاصی از عناصر انتخاب شده را استایل دهید. می توان از آنها برای تزئین (:first-line، :first-letter) یا افزودن عناصر به نشانه گذاری (ترکیب با content: ...) بدون نیاز به اصلاح نشانه گذاری (:before، :after) استفاده کرد.

• :first-line و :first-letter می توانند برای تزئین متن استفاده شوند.
• در هک .clearfix که در بالا نشان داده شد برای افزودن یک عنصر با فضای صفر و clear: both استفاده می شود.
• فلش های مثلثی در راهنماها از :before و :after استفاده می کنند. جداسازی نگرانی ها را تشویق می کند زیرا مثلث بخشی از استایل دهی محسوب می شود و نه واقعاً DOM.

مدل جعبه CSS جعبه های مستطیلی را توصیف می کند که برای عناصر در درخت سند ایجاد می شوند و طبق مدل قالب بندی بصری چیده می شوند. هر جعبه دارای یک ناحیه محتوا (مانند متن، تصویر و غیره) و نواحی اختیاری padding، border و margin اطراف آن است.

مدل جعبه CSS مسئول محاسبه موارد زیر است:

• چقدر فضا یک عنصر بلوکی اشغال می کند.
• آیا حاشیه ها و/یا margin ها همپوشانی دارند یا فرو می ریزند.
• ابعاد یک جعبه.

مدل جعبه قوانین زیر را دارد:

• ابعاد یک عنصر بلوکی با width، height، padding، borders و margins محاسبه می شود.
• اگر height مشخص نشده باشد، یک عنصر بلوکی به اندازه محتوای خود، به علاوه padding (مگر اینکه شناورهایی وجود داشته باشند، که برای آنها به پایین مراجعه کنید) ارتفاع خواهد داشت.
• اگر width مشخص نشده باشد، یک عنصر بلوکی غیر شناور برای متناسب شدن با عرض والد خود منهای padding گسترش می یابد.
• height یک عنصر با height محتوا محاسبه می شود.
• width یک عنصر با width محتوا محاسبه می شود.
• به طور پیش فرض، paddings و borders بخشی از width و height یک عنصر نیستند.

• به طور پیش فرض، عناصر دارای box-sizing: content-box هستند، و فقط اندازه محتوا در نظر گرفته می شود.
• box-sizing: border-box نحوه محاسبه width و height عناصر را تغییر می دهد، border و padding نیز در محاسبه گنجانده می شوند.
• height یک عنصر اکنون با height محتوا + padding عمودی + عرض border عمودی محاسبه می شود.
• width یک عنصر اکنون با width محتوا + padding افقی + عرض border افقی محاسبه می شود.
• در نظر گرفتن padding ها و border ها به عنوان بخشی از مدل جعبه ما، بهتر با نحوه تصور طراحان از محتوا در گریدها همخوانی دارد.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | توضیحات | | :-- | :-- | | none | عنصری را نمایش نمی دهد (عنصر دیگر بر طرح سند تأثیر نمی گذارد). همه عناصر فرزند نیز دیگر نمایش داده نمی شوند. سند طوری رندر می شود که گویی عنصر در درخت سند وجود ندارد | | block | عنصر تمام خط را در جهت بلوک مصرف می کند (که معمولاً افقی است) | | inline | عناصر می توانند در کنار یکدیگر قرار گیرند | | inline-block | شبیه inline است، اما به برخی از ویژگی های block مانند تنظیم width و height اجازه می دهد | | table | مانند عنصر <table> رفتار می کند | | table-row | مانند عنصر <tr> رفتار می کند | | table-cell | مانند عنصر <td> رفتار می کند | | list-item | مانند یک عنصر <li> رفتار می کند که به آن اجازه می دهد list-style-type و list-style-position را تعریف کند |

من برای اطمینان، مقایسه ای با block را نیز اضافه می کنم.

| | block | inline-block | inline | | --- | --- | --- | --- | | اندازه | عرض کانتینر والد خود را پر می کند. | بستگی به محتوا دارد. | بستگی به محتوا دارد. | | موقعیت دهی | در یک خط جدید شروع می شود و هیچ عنصر HTML را در کنار خود تحمل نمی کند (مگر زمانی که float را اضافه کنید) | همراه با سایر محتوا جریان می یابد و به عناصر دیگر در کنار خود اجازه می دهد. | همراه با سایر محتوا جریان می یابد و به عناصر دیگر در کنار خود اجازه می دهد. | | می تواند width و height را مشخص کند | بله | بله | خیر. در صورت تنظیم نادیده گرفته می شود. | | می تواند با vertical-align تراز شود | خیر | بله | بله | | حاشیه ها و padding ها | همه جهات رعایت می شوند. | همه جهات رعایت می شوند. | فقط جهات افقی رعایت می شوند. جهات عمودی، در صورت مشخص شدن، بر طرح بندی تأثیر نمی گذارند. فضای عمودی که اشغال می کند به line-height بستگی دارد، حتی اگر border و padding به صورت بصری در اطراف محتوا ظاهر شوند. | | Float | - | - | مانند یک عنصر block می شود که می توانید حاشیه ها و padding های عمودی را تنظیم کنید. |

یک عنصر موقعیت‌دهی شده، عنصری است که ویژگی position محاسبه‌شده آن یکی از مقادیر relative، absolute، fixed یا sticky باشد.

• static - موقعیت پیش‌فرض؛ عنصر به طور معمول در صفحه جریان می‌یابد. ویژگی‌های top, right, bottom, left و z-index اعمال نمی‌شوند.
• relative - موقعیت عنصر نسبت به خودش تنظیم می‌شود، بدون تغییر طرح‌بندی (و در نتیجه فضایی برای عنصر در جایی که اگر موقعیت‌دهی نشده بود، می‌ماند).
• absolute - عنصر از جریان صفحه حذف می‌شود و در یک موقعیت مشخص نسبت به نزدیک‌ترین جد موقعیت‌دهی شده خود (در صورت وجود)، یا در غیر این صورت نسبت به بلوک حاوی اولیه، قرار می‌گیرد. جعبه‌های با موقعیت مطلق می‌توانند حاشیه‌ها داشته باشند و با هیچ حاشیه دیگری فرو نمی‌ریزند. این عناصر بر موقعیت سایر عناصر تأثیر نمی‌گذارند.
• fixed - عنصر از جریان صفحه حذف می‌شود و در یک موقعیت مشخص نسبت به viewport قرار می‌گیرد و هنگام اسکرول حرکت نمی‌کند.
• sticky - موقعیت‌دهی sticky ترکیبی از موقعیت‌دهی relative و fixed است. عنصر به صورت relative رفتار می‌شود تا زمانی که از یک آستانه مشخص عبور کند، که در آن نقطه به صورت fixed رفتار می‌شود.

• بوت استرپ - چرخه انتشار کند. بوت استرپ 4 تقریباً 2 سال در آلفا بوده است. یک کامپوننت دکمه اسپینر اضافه کنید، زیرا به طور گسترده‌ای استفاده می‌شود.
• سیمنتیک UI - ساختار کد منبع، سفارشی‌سازی تم را به شدت دشوار می‌کند. سیستم تم‌بندی غیرمتعارف آن برای سفارشی‌سازی دردسر ساز است. مسیر پیکربندی در کتابخانه فروشنده سخت‌کد شده است. برای نادیده گرفتن متغیرها برخلاف بوت استرپ، به خوبی طراحی نشده است.
• بولما - نیاز به کلاس‌ها و نشانه‌گذاری‌های غیرمعنایی و اضافی زیادی دارد. با نسخه‌های قبلی سازگار نیست. ارتقاء نسخه‌ها برنامه را به روش‌های ظریف خراب می‌کند.

بله. فلکس باکس عمدتاً برای طرح‌بندی‌های 1-بعدی در نظر گرفته شده است در حالی که گرید برای طرح‌بندی‌های 2-بعدی است.

فلکس باکس بسیاری از مشکلات رایج در CSS را حل می‌کند، مانند مرکز قرار دادن عمودی عناصر در یک کانتینر، فوتر چسبنده و غیره. بوت استرپ و بولما بر اساس فلکس باکس هستند و احتمالاً این روزها روش توصیه شده برای ایجاد طرح‌بندی‌ها است. قبلاً فلکس باکس را امتحان کرده بودم اما در استفاده از flex-grow با مشکلاتی در سازگاری مرورگر (سافاری) مواجه شدم و مجبور شدم کد خود را با استفاده از inline-blocks و ریاضیات برای محاسبه عرض‌ها به صورت درصدی بازنویسی کنم، تجربه خوبی نبود.

گرید تا کنون بصری‌ترین رویکرد برای ایجاد طرح‌بندی‌های مبتنی بر گرید است (باید هم باشد!) اما در حال حاضر پشتیبانی مرورگر گسترده‌ای ندارد.

توجه داشته باشید که این دو رویکرد منحصر به فرد نیستند.

ریسپانسیو کردن یک وب‌سایت به این معنی است که برخی از عناصر با تطبیق اندازه یا سایر عملکردها با اندازه صفحه دستگاه، معمولاً عرض viewport، از طریق پرس و جوهای رسانه‌ای CSS، پاسخ خواهند داد، به عنوان مثال، کوچک‌تر کردن اندازه فونت در دستگاه‌های کوچک‌تر.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

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

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

استراتژی موبایل-اول 2 مزیت اصلی دارد:

• در دستگاه‌های موبایل عملکرد بهتری دارد، زیرا تمام قوانین اعمال شده برای آنها نیازی به اعتبار سنجی در برابر هیچ پرس و جوی رسانه‌ای ندارند.
• کد تمیزتری را در رابطه با قوانین CSS ریسپانسیو اجبار می‌کند.

هم طراحی واکنش‌گرا و هم تطبیقی تلاش می‌کنند تا تجربه کاربری را در دستگاه‌های مختلف بهینه کنند، با تنظیم برای اندازه‌های مختلف نمایشی، وضوح، زمینه‌های استفاده، مکانیزم‌های کنترل و غیره.

طراحی واکنش‌گرا بر اساس اصل انعطاف‌پذیری کار می‌کند - یک وب‌سایت سیال واحد که می‌تواند در هر دستگاهی خوب به نظر برسد. وب‌سایت‌های واکنش‌گرا از media queries، گرید‌های انعطاف‌پذیر و تصاویر واکنش‌گرا برای ایجاد تجربه‌ای کاربری استفاده می‌کنند که بر اساس عوامل متعدد تغییر می‌کند و انعطاف‌پذیر است. مانند یک توپ واحد که برای جا شدن در حلقه‌های مختلف بزرگ یا کوچک می‌شود.

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

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

• طراحی واکنش‌گرا می‌تواند بسیار چالش‌برانگیز باشد، زیرا شما اساساً از یک طرح‌بندی واحد و در عین حال واکنش‌گرا برای متناسب شدن با همه موقعیت‌ها استفاده می‌کنید. نحوه تنظیم نقاط شکست media query یکی از این چالش‌ها است. آیا از مقادیر استاندارد شده نقطه شکست استفاده می‌کنید؟ یا از نقاط شکستی استفاده می‌کنید که برای طرح‌بندی خاص شما منطقی هستند؟ اگر آن طرح‌بندی تغییر کند چه می‌شود؟
• طراحی تطبیقی معمولاً نیاز به تشخیص عامل کاربر یا تشخیص DPI و غیره دارد که همه اینها می‌توانند غیرقابل اعتماد باشند.

رتینا صرفاً یک اصطلاح بازاریابی برای اشاره به نمایشگرهای با وضوح بالا با نسبت پیکسل بزرگتر از 1 است. نکته کلیدی این است که استفاده از نسبت پیکسل به این معنی است که این نمایشگرها در حال شبیه‌سازی یک صفحه نمایش با وضوح پایین‌تر هستند تا عناصر را با همان اندازه نشان دهند. امروزه ما تمام دستگاه‌های موبایل را به صورت پیش‌فرض نمایشگرهای رتینا در نظر می‌گیریم.

مرورگرها به صورت پیش‌فرض عناصر DOM را با توجه به وضوح دستگاه رندر می‌کنند، به جز تصاویر.

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

برای غلبه بر این مشکل، می‌توانیم از تصاویر ریسپانسیو، همانطور که در HTML5 مشخص شده است، استفاده کنیم. این کار مستلزم در دسترس قرار دادن فایل‌های با وضوح مختلف از یک تصویر برای مرورگر و اجازه دادن به آن برای تصمیم‌گیری در مورد بهترین تصویر، با استفاده از ویژگی HTML srcset و به صورت اختیاری sizes است، به عنوان مثال:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

مهم است که توجه داشته باشید مرورگرهایی که از srcset HTML5 پشتیبانی نمی‌کنند (یعنی IE11) آن را نادیده گرفته و به جای آن از src استفاده خواهند کرد. اگر واقعاً نیاز به پشتیبانی از IE11 داریم و می‌خواهیم این ویژگی را به دلایل عملکردی ارائه دهیم، می‌توانیم از یک polyfill جاوااسکریپت استفاده کنیم، به عنوان مثال.

برای آیکون‌ها، من همچنین ترجیح می‌دهم از SVG و فونت‌های آیکون در صورت امکان استفاده کنم، زیرا آنها بدون توجه به وضوح، بسیار واضح رندر می‌شوند.

translate() یک مقدار از transform CSS است. تغییر transform یا opacity باعث reflow یا repaint مرورگر نمی‌شود، اما باعث compositing می‌شود؛ در حالی که تغییر موقعیت‌دهی مطلق باعث reflow می‌شود. transform باعث می‌شود مرورگر یک لایه GPU برای عنصر ایجاد کند، اما تغییر ویژگی‌های موقعیت‌دهی مطلق از CPU استفاده می‌کند. بنابراین translate() کارآمدتر است و منجر به زمان‌های رندر کوتاه‌تر برای انیمیشن‌های روان‌تر می‌شود.

هنگام استفاده از translate()، عنصر همچنان فضای اصلی خود را اشغال می‌کند (تا حدودی شبیه position: relative)، برخلاف تغییر موقعیت‌دهی مطلق.