مرورگرهای وب تا زمانی که وبسایتها وجود داشته باشند، در اطراف قرار دارند. در واقع، مرورگرها یک عنصر ضروری در تجربه یا افرادی هستند که سایت شما را مشاهده می کنند - اما همه مرورگرها به طور یکسان ایجاد نمی شوند. کاملا ممکن است (و در واقع احتمالا احتمالا) این است که مشتریان صفحات وب خود را در مرورگرهایی که بسیار قدیمی هستند و از ویژگی های موجود در مرورگرهای مدرن پیدا کرده اند را از دست ندهند. این مسئله می تواند مشکلات زیادی را به دنبال داشته باشد که شما در تلاش برای ایجاد وب سایت هایی هستید که از آخرین پیشرفت های طراحی و توسعه وب سایت بهره مند شوید . اگر کسی با استفاده از یکی از این مرورگرهای قدیمی، به سایت شما می آید، و آخرین تکنیک های پیشرفته برای آنها کار نمی کنند، شما می توانید تجربه ضعیف را به طور کلی ارائه دهید. پیشرفت پیشرفت یک استراتژی برای مدیریت صفحات وب برای مرورگرهای مختلف است، یعنی مرورگرهای قدیمی که در پشتیبانی مدرن وجود ندارد.
پیشرفت پیشرفت یک روش طراحی صفحات وب است تا ویژگی های بیشتر یک عامل کاربر پشتیبانی شود، ویژگی های بیشتری از صفحه وب داشته باشد. این مخالف استراتژی طراحی شناخته شده به عنوان تخریب ظریف است . این استراتژی ابتدا صفحات را برای مرورگرهای مدرن ایجاد می کند و سپس اطمینان می دهد که آنها نیز با مرورگرهای کاربردی کارآمد کار خوبی دارند - این تجربه "بی نقص" است. پیشرفت پیشرفت ابتدا با مرورگرهای کمتری آغاز می شود و تجربه ای را از آن ایجاد می کند.
نحوه استفاده از پیشرفت پیشرفته
هنگامی که شما یک طراحی وب با استفاده از پیشرفت پیشرفته ایجاد می کنید، اولین کاری که می خواهید انجام دهید این است که یک طراحی را ایجاد کنید که برای پایین ترین علامت دهنده ی مرورگرهای وب کار می کند. در هسته خود، پیشرفت پیشرفت می گوید که محتوای شما باید برای همه مرورگرهای وب، نه فقط یک زیر مجموعه باشد. به همین دلیل است که شما با حمایت از این مرورگرهای قدیمی، قدیمی و کم کار شروع می شود. اگر یک سایت را ایجاد کنید که به خوبی کار کند برای آنها، شما می دانید که یک خط پایه ایجاد کرده اید که باید حداقل یک تجربه قابل استفاده را برای همه بازدیدکنندگان ارائه دهد.
ابتدا ابتدا با مرورگرهای کمترین توانایی، شما باید اطمینان حاصل کنید که تمام HTML شما باید صحیح و صحیح باشد. این امر اطمینان حاصل می کند که وسیع ترین عامل های کاربر می توانند صفحه را مشاهده کرده و با دقت نمایش دهند.
به یاد داشته باشید که سبک طراحی بصری و طرح کلی صفحه با استفاده از ورق های سبک خارجی اضافه می شوند . این واقعا جایی است که پیشرفت پیشرفتی اتفاق می افتد. شما از یک صفحه سبک برای ایجاد یک طرح سایت استفاده می کنید که برای همه بازدیدکنندگان کار می کند. سپس می توانید سبک های اضافی را برای افزایش صفحه به عنوان عامل های کاربر به دست آوردن قابلیت اضافه کنید. هر کس سبکهای پایه را میگیرد، اما برای هر مرورگر خبر که میتواند از سبکهای پیشرفتهتر و مدرنتر پشتیبانی کند، به آنها اضافه میشود. شما "پیشرفته" صفحه را افزایش می دهید برای مرورگرهایی که می توانند از این سبک ها پشتیبانی کنند.
چند راه وجود دارد که می توانید پیشرفت پیشرفته را اعمال کنید. ابتدا باید یک مرورگر را در نظر بگیرید اگر یک خط از CSS را درک نمی کند - آن را نادیده می گیرد! این در واقع به نفع شماست. اگر شما مجموعه ای از سبک های اولیه را که همه مرورگرها درک می کنند ایجاد کنید، می توانید سبک های اضافی برای مرورگرهای جدید اضافه کنید. اگر آنها از سبک ها حمایت کنند، آنها آنها را اعمال خواهند کرد. اگر نه، آنها آنها را نادیده می گیرند و فقط از آن سبک های پایه استفاده می کنند. یک مثال ساده از پیشرفت پیشرفته در این CSS دیده می شود:
.محتوای اصلی {
پس زمینه: # 999؛
پس زمینه: rgba (153،153،153، .75)؛
}
این سبک ابتدا پس زمینه را به رنگ خاکستری تنظیم می کند. قانون دوم از مقدار رنگ RGBA برای تنظیم سطح شفافیت استفاده می کند. اگر یک مرورگر از RGBA پشتیبانی می کند، اولین سبک را با دوم جایگزین می کند. اگر این کار را نکنید، فقط اولین مورد استفاده خواهد شد. شما یک رنگ پایه را تعیین کرده اید و سپس سبک های اضافی را برای مرورگرهای مدرن افزوده اید.
با استفاده از نمایه های ویژگی
راه دیگری که می توانید پیشرفت پیشرفته را اعمال کنید این است که از آنچه که به عنوان "نمایش اطلاعات" شناخته می شود استفاده کنید. اینها مشابه پرس و جوهای رسانه ای هستند که یک قطعه اساسی طراحی وب سایت پاسخگو هستند . در حالی که متن رسانه ها برای برخی از اندازه های صفحه نمایش نمایش داده می شود، نمایش داده شدگی بررسی خواهد شد تا ببینید آیا یک ویژگی خاص پشتیبانی می شود یا نه. نحو استفاده می کنید:
supports (display: flex) {}هر سبکی که در داخل این قانون اضافه کردید فقط اگر این مرورگر "flex" را پشتیبانی کند، این سبک برای Flexbox است. شما می توانید یک مجموعه ای از قوانین برای همه تعیین کنید و سپس از نمایشگرهای ویژگی استفاده کنید تا اضافی را برای فقط مرورگرهای انتخابی اضافه کنید.
مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 12/13/16.