گوشه کریس: پورتال ها، صفحات، Polyfill های بالقوه، و بسیار معقول

مگی اپلتون «پرتال های برنامه نویسی» را می نامد:

نواحی کوچک و دارای دامنه در یک رابط گرافیکی که به کاربران امکان خواندن و نوشتن برنامه های ساده را می دهد

brb در حال به روز رسانی تمام نسخه های بازاریابی در اینجا.

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

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

حتی خود طرح‌بندی در CSS اخیراً نسبتاً آسان شده است، که براد با تعدادی قلم مرجع خوب نشان می‌دهد.

بیایید یک دقیقه در مورد چیدمان بنشینیم. لذت بردم روش های 6+5 وادیم مایف برای ایجاد یک طرح بندی دو ستونی: از کاملاً معقول تا کاملاً اشتباه.

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

1. HTML <table>
2. شناورها
3. بلوک درون خطی
4. چند ستونی
5. فلکس باکس
6. توری

آن‌طور که وادیم می‌گوید، آن‌ها «معقول» هستند. بخش «+5» گروه دیگری از راه‌های انجام این کار است که کار می‌کند اما در بهترین حالت مشکوک است.

1. موقعیت یابی مطلق
2. استفاده از حالت نوشتن برای چرخاندن بلوک‌های متن به سمت «کنار»
3. SVG ForeignObject
4. عنصر()
5. قاب / قاب

عاشقشم. احساس میکنم باید ادامه بدیم بوم! بلوک های یونیکد در a <pre>! و همیشه خنده دار –webkit-box-reflect.

یک نوع مشخص از وجود دارد :nth-child انتخابگر که از of کلمه کلیدی برای محدوده چیزی که می شمارید. مثلا:

li:nth-child(2 of .featured) {
  
}

بنابراین شما فقط دومین مورد لیست را انتخاب نمی کنید، بلکه ظاهر دوم را انتخاب می کنید .featured کلاس در مورد موارد فهرست این یک اشتباه رایج است که همین است li.featured:nth-child(2) انجام می دهد، اما نه، این فقط در صورتی انتخاب می کند که یک آیتم لیست هر دو دارای کلاس باشد و اتفاقاً فرزند دوم است. می خواهیم انتخاب کنیم…

<*l>
  <li>thing
  <li>thing
  <li class="featured">thing
  <li>thing
  <li class="featured">**THIS ONE**
  <li>thing

ترومبون غمگین: فقط سافاری این قابلیت را پیاده سازی کرده است.

اما براموس ون دام راه حلی دارد!

.featured ~ .featured:not(.featured ~ .featured ~ .featured) {
  color: red;
}

این یک انتخابگر کوبنده به نظر می رسد، اما در اصل می گوید “انتخاب همه .featured عناصری که پس از دیگری می آیند .featured عنصر، اما وقتی سه را زدید، انتخاب را متوقف کنید. شما با این موضوع پیچیده‌تر و پیچیده‌تر می‌شوید، که در واقع خوب است بدانید که امکان‌پذیر است، اما فکر می‌کنم تا زمانی که برای چیزی به آن نیاز داشته باشم، منتظر آن عمل خواهم بود.

پست گوشه کریس: پورتال ها، صفحات، Polyfill های بالقوه، و بسیار معقول اول ظاهر شد وبلاگ CodePen.