طرح ساختاری بومی CSS در شبکه CSS – مجله سر و صدا

درباره نویسنده

راشل اندرو نه تنها مدیر مسئول مجله Smashing است ، بلکه همچنین یک توسعه دهنده وب ، نویسنده و سخنران وب است. او نویسنده تعدادی کتاب است ، از جمله
بیشتر در مورد
راشل اندرو
…

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

چیدمان سنگ تراشی چیست؟

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

مشهورترین نمونه سنگ تراشی در حال انجام است Pinterest، و بعضی اوقات می شنوید که مردم از طرح به عنوان “طرح Pinterest” یاد می کنند.

تعدادی ابزار جاوا اسکریپت برای کمک به شما در ایجاد این نوع طرح مانند David DeSandro وجود دارد پلاگین سنگ تراشی.

آیا دیگر نمی توانیم این کار را در CSS انجام دهیم؟

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

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

بنابراین ، برای دستیابی به سنگ تراشی ، هنوز به جاوا اسکریپت نیاز دارد. انجام طرح بندی با JavaScript – به ویژه با تعداد زیادی از مواردی که اغلب از این نوع طرح ها سود می برند – هرگز عملکرد خوبی نخواهد داشت. من در ابتدا اشاره کردم که توسعه دهندگان وب این ویژگی را درخواست می کنند در ژانویه 2017، و در حالی که من برخی از نگرانی ها را در مورد اینکه آیا این واقعاً یک مسئله شبکه ای است (و همچنین احتمال مشکلات دسترسی به دلیل مرتب سازی مجدد محتوا) نیز دارم ، خوشحالم که این روند رو به جلو است.

ویژگی سنگ تراشی طرح بندی شبکه

این یک مشخصات جدید است ، بنابراین ممکن است همه چیز قبل از ارسال در مرورگرهای بیشتر تغییر کند. با این حال ، از نظر اجرای Masonry در Firefox ، وضعیت خوبی داریم. نسخه ای از Firefox Nightly را دریافت کرده و آن را فعال کنید layout.css.grid-template-masonry-value.enabled پرچم در about:config برای بازی کردن با آن وقتی این کار را انجام دادید و با استفاده از Firefox به این صفحه برگشتید ، همه نسخه های نمایشی کار می کنند.

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

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

این تمام کاری است که شما باید برای به دست آوردن یک طرح ساده سنگ تراشی انجام دهید. با استفاده از Firefox می توانید این مورد را در مثال CodePen در زیر مشاهده کنید.

با این وجود می توانیم در آنجا متوقف شویم ، افزودن سنگ تراشی به CSS Grid به این معنی است که حتی اگر در یک طرح سنگ تراشی هستیم ممکن است انتظار داشته باشیم که سایر موارد شبکه کار کنند. بنابراین ، مشخصات نیاز به تعریف آن موارد دارد.

رفتار در محور شبکه

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

همچنین می توانید موارد را با استفاده از قرار دادن مبتنی بر خط در این محور قرار دهید. اینها ابتدا قبل از قرار دادن وسایل سنگ تراشی قرار می گیرند. در مثال بعدی ، من تصویر را با عنوان 5 بین خطی که نامگذاری شده قرار داده ام box-start و خطی به نام box-end. وسایل سنگ تراشی در اطراف آن قرار گرفته است.

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

masonry-auto-flow ویژگی

مشخصات سنگ تراشی برخی از خصوصیات اضافی را به طرح Grid اضافه می کند. masonry-auto-flow ویژگی هنوز در اجرای Firefox نیست. هنگام اجرای این ویژگی به شما امکان کنترل جریان موارد در طرح سنگ تراشی را می دهد.

استفاده كردن masonry-auto-flow: next مورد را به جای بسته بندی در ستون با بیشترین فاصله به طور پیش فرض ، در مکان بعدی در محور شبکه قرار می دهد.

استفاده كردن masonry-auto-flow: ordered باعث خواهد شد سنگ تراشی موارد را با قرارگیری مشخص نادیده بگیرد و وسایل را با استفاده از آن بیرون بگذارد سفارش سند اصلاح شده؛ یعنی به ترتیبی که در سند هستند مگر اینکه با order ویژگی.

justify-tracks و align-tracks خواص

این ویژگی ها در زمان نوشتن مقاله در Firefox Nightly تا حدی کار می کنند. اینها ویژگیهای تراز اضافی برای طرحهای سنگ تراشی هستند. اگر سنگ تراشی در جهت بلوک دارید ، می توانید استفاده کنید align-tracks، اگر شما سنگ تراشی در جهت داخلی استفاده کنید justify-tracks.

اگر فضای بیشتری در ظرف شبکه خود در ابعادی که با استفاده از سنگ تراشی ترسیم می شود ، داشته باشید ، متوجه می شوید که موارد با شروع ظرف هم تراز هستند. مقدار اولیه align-tracks (در مورد ما با سنگ تراشی برای ردیف ها ایجاد می شود) است start.

این خواص در کنار هم کار می کنند align-content و justify-content. برای نشان دادن چگونگی ، من یک مثال دارم که ظرف شبکه دارای 200vh ارتفاع است. من تنظیم کرده ام align-tracks ارزش به end.

اگر align-content است normal (که اگر من ملک را اضافه نکرده باشم) ، سپس مسیرهای سنگ تراشی در انتهای ظرف ختم می شوند.

اگر اضافه کنم align-content: start، مسیرهای سنگ تراشی به ابتدای ظرف برمی گردند. با این حال ، “لبه های خشن” طرح اکنون در بالا و نه پایین قرار دارند زیرا آهنگ های سنگ تراشی تا انتها تراز شده اند.

توجه داشته باشید: می توانید از هر یک از مقادیر استفاده شده برای آن استفاده کنید align-content برای align-tracks و justify-tracks. چندین نمونه خوب در مشخصات ترکیبات مختلف وجود دارد.

اگر تنظیم کنید align-tracks: stretch، سپس هر مورد به اندازه خودکار در طرح کشیده می شود. اثر سنگ تراشی حفظ می شود ، اما هر چیزی که در آن محور مشخص باشد از شکل خارج نمی شود.

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

به نظر نمی رسید که این در زمان نوشتن مقاله در Firefox کارساز باشد.

مشخصات جزئیات نشان می دهد که اگر مقادیر کمتری از آهنگ ها وجود داشته باشد ، آهنگ های باقی مانده از مقدار مشخص شده نهایی استفاده می کنند. اگر مقادیر بیشتر از آهنگ ها باشد ، موارد اضافی نادیده گرفته می شوند.

رفتار افتادنی

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

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

@supports (grid-template-rows: masonry) {
  /* masonry code here */
}

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

نگرانی های بالقوه دسترسی

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

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

بازخورد شما مورد نیاز است

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

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

(The)