مسلماً یکی از جذاب‌ترین جنبه‌های توسعه وب در سال‌های اخیر، سطح قابل توجهی سازگارتر از پشتیبانی از استانداردهای جدید HTML، CSS و ECMAScript (جاوا اسکریپت) در بین مرورگرهای وب بوده است. با این حال، با وجود معرفی ویژگی‌های جدید مانند پرسش‌های رسانه‌ای، flex، واحدهای rem و موارد دیگر، نمی‌توان همین را برای مشتریان ایمیل گفت.
بیایید نگاهی به برخی از این ویژگی‌ها بیندازیم و چگونه می‌توانیم آنها را برای همه مشتریان ایمیل در سال 2022 کارایی کنیم.
CSS داخلی
بدون شک، یکی از آزاردهنده‌ترین جنبه‌های ایجاد ایمیل ، اعلام سبک‌ها برای هر عنصر منفرد در ویژگی style آن است (به عنوان مثال <element style=”style:value;”></element>)، که در غیر این صورت به نام CSS درون خطی شناخته می‌شود. '.
خوشبختانه، CSS داخلی (یعنی سبک هایی که در یک عنصر <style> نوشته شده اند) اکنون پشتیبانی بیشتری دارد. CSS داخلی بسیار کارآمدتر است زیرا ما را قادر می سازد انتخابگرها را ترکیب کنیم و کد کمتری بنویسیم که خواناتر باشد.
طبق گفته Can I Email ، CSS داخلی در 84.85٪ از مشتریان ایمیل امروزی کار می کند ، اما قوانینی وجود دارد که برای تحقق این امر باید رعایت شود.
خوشبختانه، با استفاده از دو عنصر <head>/ وارد کردن عنصر <style> در عنصر دوم، می توان همه قوانین را رعایت کرد. مثال زیر را ببینید…
با این حال، در حالی که روزهای استایل‌سازی با استفاده از ویژگی‌های قدیمی XHTML (به عنوان مثال <element align=”center”>) به پایان رسیده است، پشتیبانی از CSS داخلی آن‌طور که ما می‌خواهیم بالا نیست، بنابراین بسیاری از توسعه‌دهندگان ایمیل همچنان درون‌خط را انتخاب می‌کنند. CSS بسته به مخاطب هدف.
شایان ذکر است که برخی از ویژگی‌ها (مانند درخواست‌های رسانه‌ای و فونت‌های سفارشی) نمی‌توانند «داخلی» شوند، بنابراین یک رویکرد رایج برای کدنویسی ایمیل‌ها استفاده از CSS داخلی برای پیشرفت‌های تدریجی و استفاده از CSS داخلی برای هر چیز دیگری است (مگر اینکه این کار را انجام دهید. مایل به از دست دادن فونت های سفارشی و طرح بندی های جالب، البته).
این یک رویکرد ایده آل نیست، اما همان چیزی است که هست.
توجه: CSS خارجی (یعنی روش <link rel=”stylesheet”> ) فقط در 21.21٪ از مشتریان ایمیل امروزی کار می کند، که مایه شرمساری است زیرا تا حدودی ایجاد سیستم های طراحی ایمیل را رد می کند.
داستان های رسانه
CSS داخلی به ما این امکان را می دهد که از پرس و جوهای رسانه ای که جزء ضروری طراحی واکنش گرا هستند استفاده کنیم. بدون پرسش‌های رسانه‌ای، ایمیل‌ها می‌توانند به شدت خطی به نظر برسند، و در حالی که از دیدگاه مینیمالیستی هیچ مشکلی در این مورد وجود ندارد، طراحی عمودی در هر سناریویی انتخاب مناسبی نخواهد بود.
جستجوهای رسانه ای فقط در 75.75٪ از مشتریان ایمیل مدرن کار می کنند، بنابراین توصیه می کنیم طرح بندی های پاسخگو را طراحی کنید که به طرح بندی های عمودی بسیار زیبا تبدیل می شوند.
علاوه بر این، قوانینی وجود دارد که باید به خاطر بسپارید…
- از پرس و جوهای رسانه ای تو در تو خودداری کنید
- شرایط را به صفحه نمایش، حداقل عرض، و حداکثر عرض محدود کنید یا آنها را به طور کامل حذف کنید (@media { … })
- ۰۱/۰۳/۰۵