ساختارهای CSS جدید، طراحی وب را فراتر از جعبه‌های کوچک حساس می‌برد

استبداد چند دهه ای وب جهانی در طراحی جعبه بالاخره به پایان خود نزدیک می شود. مجموعه جدیدی از ویژگی‌های CSS - از جمله تابع shape() و ویژگی‌های شکل حاشیه و گوشه - به طراحان وب و عوامل هوش مصنوعی آنها پالت گسترده‌تری برای چیدمان محتوا به شیوه‌ای روان‌تر ارائه می‌دهد. هنگامی که کنسرسیوم جهانی وب (W3C) اولین استاندارد خود را برای صفحه‌آرایی صفحه وب در سال 1996 منتشر کرد، وب‌سایت‌ها از طرح‌بندی‌های شبکه‌ای مقالات، روزنامه‌ها و مجلات دانشگاهی تقلید کردند. در آن زمان، درایورهای گرافیک و موتورهای رندر مرورگر همگی در وضعیت نسبتا ابتدایی قرار داشتند.

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

فیلم کلاسیک مقدماتی علمی تخیلی Abbott در سال 1884 Flatland: A Romance of Many Dimensions، قهرمان داستان که در فضای مسطح دو بعدی زندگی می کند، ناگهان در معرض دنیای سه بعدی گیج کننده قرار می گیرد که باعث شگفتی او می شود. توسعه دهندگان وب ممکن است در اولین استفاده از این ساختارهای جدید CSS احساسات مشابهی را تجربه کنند. انتخاب توسعه دهنده: عمودی یا افقی در اشکال اصلی خود، HTML و CSS می توانند فقط خطوط یا حاشیه های افقی یا عمودی را در یک صفحه وب ترسیم کنند. طرح‌بندی‌های جذاب‌تر به پلاگین‌های اختصاصی مانند جاوا اپلت، Macromedia/Adobe Flash یا برخی هک‌های خسته‌کننده جاوا اسکریپت نیاز دارند.

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

تابع path() محدودیت هایی داشت – به تغییر اندازه صفحه وب پاسخ نمی داد و متغیرها یا واحدهای اندازه گیری CSS را درک نمی کرد. توسعه دهندگان باید تمام مشخصات را در پیکسل تعریف می کردند و بس. این منحنی ها را بررسی کنید تابع shape() به درستی وب را با طراحی غنی تر معرفی کرد. شکل () مجموعه ای از مختصات هندسی یک شکل یا مسیر مورد نظر است. برخلاف اتکای path() به SVG، بر اساس دستور CSS پاسخگو ساخته شده است.

هنگامی که با ویژگی clip-path موجود ترکیب می‌شود، shape() برای ایجاد خرد بلیط، حباب‌های چت و دیگر دسته‌بندی صفحات مختلف استفاده شده است. آخرین ویژگی CSS، شکل حاشیه، کار را با اعمال مختصات بومی CSS تعریف شده در shape() در خود حاشیه های صفحه وب تکمیل می کند. مختصات را با shape() تعریف کنید، آن را در یک ویژگی حاشیه شکل قرار دهید، و مرزها در خود صفحه مشخص می شوند. مرزها در مراحل اولیه رندر قرار می گیرند، نه اینکه نزدیک به انتهای رندر بریده شوند.

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

به عنوان مثال، با استفاده از چیزی جز CSS، یک قلب باز را در داخل یک جعبه مربع شکل دهید. یا مرز بیرونی یا شکل داخلی را می توان متحرک کرد، که اجازه می دهد با عبور ماوس از روی آن، حاشیه بیرونی شکل خود را تغییر دهد، یا حاشیه داخلی با یک تصویر یا طرح دیگری پر شود. هنگامی که ماوس روی آن قرار می‌گیرد، یک شکل می‌تواند بزرگ یا کوچک شود، یا می‌توان متن را با خطوط کوچکی برجسته کرد. اگر ساخت دستی محتویات shape() جام شما نیست، یک ویژگی همراه به نام corner-shape تعدادی الگوی حاشیه فانتزی از پیش تعریف شده را ارائه می دهد.

بیشتر انواع جعبه استاندارد هستند، از جمله جعبه هایی با لبه های گرد، لبه های اریب، بریدگی ها، اسکوپ ها و یکی به نام "squircle". طبق سایت caniuse.com، همه مرورگرهای اصلی اکنون از shape() پشتیبانی می کنند، در حالی که شکل حاشیه و گوشه هنوز در حال پیاده سازی و آزمایشی در نظر گرفته می شوند (اگرچه نسخه های فعلی کروم، اج و اپرا از استاندارد پشتیبانی می کنند). اکنون، این بر عهده توسعه دهندگان است که یک وب روان تر بسازند. ®