ساختن طرح‌بندی‌های پیچیده و انعطاف‌پذیر هرگز آسان نبوده است، اما CSS3 مطمئناً بسیاری از سردردها را از بین برده است.

ویژگی‌های CSS3 مانند Flexbox و Columns، طرح‌بندی‌های پیچیده را به یک امکان واقعی تبدیل کرده‌اند و اکنون با یکی از جدیدترین موارد اضافه شده به جعبه ابزار طراحان وب، یعنی مناطق CSS، به آن‌ها ملحق شده‌اند.

مناطق CSS به شما این امکان را می دهند که محتوا را در یک سری کانتینر جریان دهید روی یک مجرد page. این معادل پیوند جعبه های متن در برنامه ای مانند InDesign است. برخی از طرح‌بندی‌ها را که قبلاً فقط با محو کردن خط بین داده‌ها و سبک‌ها امکان‌پذیر بود، ممکن می‌سازد.

پشتیبانی از مرورگر

مثل همیشه، پشتیبانی از مرورگر بسیار عالی است.

مناطق CSS هنوز یک پیش نویس است، به این معنی که آزمایشی است. در ابتدا تنها مرورگری که واقعاً از آن پشتیبانی می کرد Internet Explorer 10 بود (نه، شوخی نمی کنم). اگرچه IE10 از iframe به عنوان منبع محتوا استفاده می کند.

سافاری ادعا می کند که پشتیبانی را با پیشوند ارائه می کند.

در کروم می‌توانید با باز کردن مرورگر، تایپ کردن «about:flags» و فعال کردن «enable-experimental-webkit-features» و سپس راه‌اندازی مجدد مرورگر، این ویژگی را آزمایش کنید.

خوشبختانه یک نیز وجود دارد JavaScript polyfill ایجاد شده توسط Adobe که عملکرد مناطق CSS را به مرورگرهایی که در حال حاضر از آن پشتیبانی نمی کنند، می آورد، می توانید این را پیدا کنید روی github.

استفاده از مناطق CSS

از آنجایی که هدف مناطق CSS این است که به متن ما اجازه دهد در کانتینرهای مختلف جریان یابد، اولین چیزی که به آن نیاز دارید متنی است:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.
Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.
</div>

و سپس چند ظرف:

<div class="containers"></div>
<div class="containers"></div>
<div class="containers"></div>

اکنون محتوای اولیه را تنظیم کرده ایم، می توانیم با استفاده از کانتینرها را پیوند دهیم جریان به و جریان از، در مثالی که اضافه کردم متوجه خواهید شد -وب کیت- پیشوند

.text {
 -webkit-flow-into: text-flow;
 padding: 0;
 margin: 0;
 color: #F2F2F2;
 font-family: helvetica, arial;
 font-size: 16px;
 line-height: 22px;
}
 
.containers{
 -webkit-flow-from: text-flow;
 background: #333333;
 padding: 5px;
 margin-top: 100px;
 width: 200px;
 height: 300px;
 float: left;
 margin-right: 20px;
}

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

درک جریان به

-webkit-flow-into: text-flow;

این ویژگی یک شناسه را به عنوان مقدار می پذیرد. هنگامی که مقداری را به این ویژگی ارسال می کنید، بخشی از یک جریان نامگذاری شده می شود و رندر به عنوان بخشی از آن متوقف می شود. page جریان. می توانید با تنظیم ویژگی روی none آن را لغو کنید.

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

این به متن محدود نمی شود، ما همچنین می توانیم تصاویر، لیست ها و بسیاری از انواع دیگر محتوای HTML را جریان دهیم.

درک جریان از

-webkit-flow-from: text-flow;

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

مقدار نام جریانی است که برای آن مشخص کردیم جریان به ویژگی.

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

افکار نهایی

برای مشاهده نمونه ای از مناطق CSS در عمل، نگاهی به آن بیندازید این قلم من ایجاد کردم.

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

آیا از مناطق CSS هیجان زده هستید؟ فکر می کنید چقدر زود می توانیم از آنها استفاده کنیم؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر آبشار از طریق cuatrok77.