رمز و رازهای سافاری 9 برای طراحان وب

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

۱- نحوه قرارگیری صفحه در هنگام اسکرول

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

مرورگر safari 9 روش زیر را برای استفاده از این متود در کدهای css معرفی کرده است و با استفاده از این استاندارد کار طراحان وب برای نمایش طراحی های تک صفحه ای در مرورگر safari 9 آسان شده است :

-webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, and -webkit-scroll-snap-coordinate

۲- سایت های علامت گذاری شده

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

کاری که طراحان سایت باید انجام دهند این است که یک آیکون کوچک با حاشیه سیاه و پیش زمینه transparent با فرمت svg بسازند و آن را در قسمت head کدهای htmlلینک کنند درست مثل آدرس زیر :

<link rel=”icon” sizes=”any” mask href=”wedesignerdepot.svg”>

اگر می خواهید آیکونتان رنگ داشته باشد می توانید از تگ زیر استفاده کنید :

<meta name=”theme-color” content=”#FAB23A”>

۳- پیشرفت ویدئوها در html5

سافاری ۹ روشی پیشرفته برای نمایش ویدئوها با html5 معرفی کرده است. این روش که PiP (تصویر در تصویر) نام دارد و در تلویزیون‌ها استفاده میشود، این امکان را به شما می‌دهد که بتوانید یک ویدئو را به صورت کوچک‌شده در گوشه‌ای از مرورگرتان مشاهده کنید و همزمان به کارهای دیگرتان بپردازید و برای این کار لازم نیست اجرای ویدئوی مورد نظر را متوقف کنید.

۴- قدرت در لمس

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

webkitmouseforcewillbegin ، webkitmouseforcedown، webkitmouseforceup و webkitmouseforcechanged

۵- ۶ ECMASCRIPT

سافاری ۹ به طور کامل از کلاس‌ها، خواص محاسبه، اشیاء مربوط به اعداد، هشت هشتی و باینری و … پشتیبانی می کند. این پشتیبانی قوی از جاوا اسکریپت به این معناست که این زبان یک قدم به تبدیل شدن به یک زبان OOP یا شی‌گرا نزدیک‌تر شده است .

۶- ابزار طراحی برای توسعه دهندگان

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

۷- حذف کردن پیشوند ها در بعضی از خواص css

یکی از مهمترین به‌روزرسانی‌هایی که در این مرورگر انجام شده و برای توسعه‌دهندگان بسیار مفید است. حذف پیشوندها در بیش از ۴۵ ویژگی css می باشد. با این حال هنوز بسیاری از این پیشوندها برای نمایش در مرورگرهای دیگر استفاده می شود . از جمله ویژگی های که پیشوند آنها برداشته شده است می توان به ویژگی های flex ، transition ،transport وanimation اشاره کرد .

منبع: طراحی سایت آسان