সিএসএস @ মিডিয়া বিধিগুলিকে ইনলাইন স্থাপন করা কি সম্ভব?

293

আমাকে ব্যানার চিত্রগুলি গতিশীলভাবে এইচটিএমএল 5 অ্যাপে লোড করতে হবে এবং পর্দার প্রস্থের সাথে সামঞ্জস্য করতে বেশ কয়েকটি বিভিন্ন সংস্করণ চাই। আমি ফোনের স্ক্রিনের প্রস্থটি সঠিকভাবে নির্ধারণ করতে পারি না, সুতরাং এটি করার একমাত্র উপায় হ'ল একটি ডিভের পটভূমি চিত্র যুক্ত করা এবং স্ক্রিনের প্রস্থ নির্ধারণ করতে এবং সঠিক চিত্রটি প্রদর্শনের জন্য @ মিডিয়া ব্যবহার করা।

উদাহরণ স্বরূপ:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

এটি কি সম্ভব, বা কারও কাছে অন্য কোনও পরামর্শ আছে?

html  css  media-queries 
— নর্তকী
সূত্র
3
উত্তর নিয়ে হতাশ? এই মন্তব্য দেখুন । এটি সাহায্য করতে পারে।
— রিনোগো

উত্তর:

284

না, @mediaনিয়ম এবং মিডিয়া ক্যোয়ারীগুলি ইনলাইন শৈলীর বৈশিষ্ট্যে বিদ্যমান থাকতে পারে না কারণ তারা কেবলমাত্র property: valueঘোষণা থাকতে পারে । হিসাবে বৈশিষ্ট রাখে এটা:

শৈলীর বৈশিষ্ট্যের মান অবশ্যই একটি সিএসএস ঘোষণার ব্লকের সামগ্রীর সিনট্যাক্সের সাথে মেলে

শুধুমাত্র কিছু নির্দিষ্ট মিডিয়ায় কোনও উপাদানগুলিতে শৈলী প্রয়োগ করার একমাত্র উপায় হ'ল আপনার স্টাইলশীটে একটি পৃথক নিয়ম, যার অর্থ আপনার জন্য এটির জন্য কোনও নির্বাচকের সাথে আসতে হবে।

একজন ডামি spanসিলেক্টর এর মতো দেখতে লাগবে, তবে আপনি যদি খুব নির্দিষ্ট উপাদানটিকে টার্গেট করে থাকেন তবে আপনার আরও নির্দিষ্ট নির্বাচকের প্রয়োজন হবে:

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
— বোল্টক্লক
সূত্র
70
আপনি কেবল <style>আপনার এইচটিএমএলে একটি ট্যাগ রাখতে পারেন। এটি একটি ক্ষেত্রে প্রয়োজনীয় ডিপ্রোস যেখানে background-imageডায়নামিকভাবে একটি ডাটাবেস থেকে টানা হয়। স্পষ্টতই বাহ্যিক স্টাইলশিটে তার পক্ষে সঠিক জায়গা নয়।
— জ্যাক উইলসন
1
@ জাকোবুদ: হ্যাঁ, স্টাইলশিটটি কোথায় রয়েছে তা বিবেচ্য নয় তবে মূল বিষয়টি হ'ল আপনি কেবল সিএসএসে এটি করতে পারেন, কোনও ইনলাইন শৈলী বৈশিষ্ট্য নয়।
— বোল্টক্লক
3
ভবিষ্যতের এক্সপ্লোরারদের কাছে নোট করুন যে <script>ইমেল ফরোয়ার্ড করার সময় ট্যাগটি প্রায়শই ইমেল ক্লায়েন্টদের দ্বারা ছিনিয়ে নেওয়া হয়, তাই লোকেরা ইমেলগুলির জন্য ইন-লাইন শৈলীগুলি ব্যবহার করার দিকে ঝুঁকেন। এবং এর অর্থ কোনও মিডিয়া অনুসন্ধান নয়। আমি বর্তমানে এই পরিস্থিতির জন্য সর্বোত্তম অনুশীলনগুলি অনুসন্ধান করছি, তবে কেবল একটি বন্ধুত্বপূর্ণ শিরোনাম।
— টিসিএনডিডিএসএফ
3
দয়া করে সর্বাধিক প্রস্থ সেট করুন em, এর মধ্যে নয় px। আপনি যখন জুম করবেন তখন সেভাবে এটি সংবেদনশীলভাবে কাজ করবে।
— সিলাস এস ব্রাউন
2
@ সিলাস এস ব্রাউন: এটি আমার সমস্যা নয়। আমি কেবল প্রশ্নটিতে কী ব্যবহার করছি তা প্রতিফলিত করছি।
— BoltClock
137

সমস্যা

না, মিডিয়া ক্যোয়ারীগুলি এভাবে ব্যবহার করা যাবে না 

<span style="@media (...) { ... }"></span>

সমাধান

তবে আপনি যদি উড়তে এবং প্রতিক্রিয়াশীল হিসাবে ব্যবহারযোগ্য একটি নির্দিষ্ট আচরণ সরবরাহ করতে চান তবে আপনি styleমার্কআপটি ব্যবহার করতে পারেন , বৈশিষ্ট্যটি নয়।

ই আই

<style scoped>
.on-the-fly-behavior {
    background-image: url('particular_ad.png'); 
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

কোডপেইনে সরাসরি কাজ করে কোডটি দেখুন

উদাহরণস্বরূপ আমার ব্লগে আমি সিএসএসের ঘোষণার পরেই একটি <style>মার্কআপ ইনজেক্ট করি এবং এতে আমি কোনও শিল্পী লেখার সময় ফ্লাইতে অতিরিক্ত শ্রেণি তৈরি করার জন্য রিয়েল কন্টেন্ট টেক্সারিয়ার পাশে সরবরাহ করা টেক্সারিয়া সামগ্রী সরবরাহ করি।<head><link>

দ্রষ্টব্য: scopedবৈশিষ্ট্যটি HTML5 নির্দিষ্টকরণের একটি অংশ ation আপনি যদি এটি ব্যবহার না করেন তবে বৈধতাদাতা আপনাকে দোষ দেবে তবে ব্রাউজারগুলি বর্তমানে আসল উদ্দেশ্য সমর্থন করে না: <style>কেবলমাত্র তাত্ক্ষণিকভাবে পিতামাতার উপাদান এবং সেই উপাদানটির শিশু উপাদানগুলিকেই বাদ দেওয়া হয়েছে। <style>উপাদানটি <head>মার্কআপে থাকলে স্কোপ বাধ্যতামূলক নয় ।

আপডেট: আমি সর্বদা প্রথমে মোবাইলে নিয়ম ব্যবহার করার পরামর্শ দিচ্ছি যাতে আগের কোডটি হওয়া উচিত:

<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
    background-image: url('particular_ad_small.png'); 
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously.  */
    .on-the-fly-behavior {   
        background-image: url('particular_ad.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>
— ব্রুনো লেসিউর
সূত্র
10
এটি গৃহীত উত্তরের চেয়ে উত্তম উত্তর কারণ এটি background-imageপৃষ্ঠাটি লোড হওয়ার পরে আপনাকে পরিবর্তনশীলভাবে পরিবর্তন করতে দেয় ।
— জ্যাক উইলসন
7
নীতিগতভাবে স্কোপ করা দুর্দান্ত মনে হলেও ক্রোম তাদের প্রাথমিক সমর্থনটি কয়েক সংস্করণ পূর্বে সরিয়ে নিয়েছে এবং এখন কেবল ফায়ারফক্সের কোনও সমর্থন আছে।
— অ্যান্টনি ম্যাকলিন
1
.on-the-fly-behaviorস্কোপডটি কেবল যেভাবেই ব্যবহার করার অনুমতি না দেওয়ার জন্য ব্যবহৃত হয় তবে কিছু ন্যাভিগেটর শব্দটি যদি "উপেক্ষা" করে থাকেন তবে সমস্যা নয়। <স্টাইল> সমস্ত ন্যাভিগেটরে <body> ব্যবহার করা যেতে পারে, এটি কাজ। এটি কেবলমাত্র ডাব্লু 3 সি বৈধকরণের প্রয়োজনীয়তা।
— ব্রুনো লেসিয়র
4
যদিও scopedএটি একটি উজ্জ্বল সমাধান তবে এটি আনুষ্ঠানিকভাবে কোনও ব্রাউজার দ্বারা সমর্থিত নয়। আশা করি শিগগিরই এটি বদলে যাবে।
— কেন শার্প
1
এটি অন্য একটি প্রশ্ন, কারণ কোনও ইমেলের মূল লক্ষ্য ক্লায়েন্ট ইমেল দ্বারা পড়া এবং অনেক ক্লায়েন্ট ইমেল এম্বেডিং <style>, media queriesবা সমস্ত HTML / সিএসএস বৈশিষ্ট্য সমর্থন করে না । সুতরাং আসলে সমস্যাটি এর চেয়ে আরও বড়। আমি কেবল জানি আপনি কেবলমাত্র এইচটিএমএল 4 এবং সিএসএস 2 বৈশিষ্ট্য (কিছু আউটলুক হ্যাক সহ) সহ সমস্ত ক্লায়েন্ট ইমেলের (জিমেইল অন্তর্ভুক্ত) তে একইভাবে প্রদর্শিত ইমেল তৈরি করতে সক্ষম, তবে এই ক্ষেত্রে কোনও মিডিয়া কোয়েরি নেই।
— ব্রুনো লেসিউর
15

ইনলাইন শৈলীতে বর্তমানে ঘোষণাপত্র ( property: valueজোড়া) ব্যতীত অন্য কিছু থাকতে পারে না ।

আপনি আপনার দস্তাবেজের বিভাগে styleউপযুক্ত mediaবৈশিষ্ট্যযুক্ত উপাদানগুলি ব্যবহার করতে পারেন head।

— মারাত তানালিন
সূত্র
13

হ্যাঁ, আপনি যদি কোনও ছবি ট্যাগ ব্যবহার করেন তবে আপনি ইনলাইন সিএসএসে মিডিয়া ক্যোয়ারী লিখতে পারেন। বিভিন্ন ডিভাইসের আকারের জন্য আপনি বিভিন্ন চিত্র পেতে পারেন।

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
— আরিফ হুসেন
সূত্র
এটি CSS ব্যাকগ্রাউন্ড-চিত্রের ক্ষেত্রে প্রযোজ্য নয়: ইউআরএল ()
— জোনাস ইবারল
10

আপনি যদি বুটস্ট্র্যাপের রিস্পন্সাল ইউটিলিটি বা অনুরূপ বিকল্প ব্যবহার করছেন যা ব্রেক পয়েন্টের উপর নির্ভর করে ডিভগুলি আড়াল / প্রদর্শন করতে দেয়, তবে বেশ কয়েকটি উপাদান ব্যবহার করা এবং সবচেয়ে উপযুক্ত দেখাতে পারে। অর্থাত

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
— পাভেল
সূত্র
3
সুন্দর কাজের মতো - মিডিয়া ক্যোয়ারির উপর ভিত্তি করে ডিভিডটি লুকান, ডিভ দেখান - আমি দেখতে পাচ্ছি একমাত্র ত্রুটি এটি এখনও উভয় চিত্র লোড করবে যাতে আপনি উভয়কে ক্লায়েন্টকে প্রেরণ করবেন।
— মাইকেল সি গেটস 13
4
সদৃশ বিষয়বস্তু রক্ষণাবেক্ষণ বা এসইওর জন্য ভাল জিনিস নয়।
— ব্রুনো লেসিউর
1
দুর্ভাগ্যক্রমে এই মিথ্যা বন্ধু! আমি এই সমাধানটি সম্পর্কেও ভেবেছিলাম, তবে আমরা ছোট ডিভাইসগুলিতে পরিবেশন করতে এবং ডাউনলোডে বাইট সংরক্ষণ করতে চাই। এই কৌশলটি ঠিক এর বিপরীতে কাজ করে
— এ।
8

স্টাইল-বৈশিষ্ট্যে মিডিয়া ক্যোয়ারী এখনই সম্ভব নয়। তবে আপনাকে যদি জাভাস্ক্রিপ্টের মাধ্যমে গতিশীলভাবে সেট করতে হয়। আপনি জেএস এর পাশাপাশি সেই নিয়মটি সন্নিবেশ করতে পারেন।

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

এটি স্টাইলশীটে স্টাইলটি ছিল বলে মনে হয়। সুতরাং সুনির্দিষ্টতা সম্পর্কে সচেতন হন।

— প্রকার-স্টাইল
সূত্র
কোন ধারণা কখন সম্ভব হবে?
— সুপারউবারডুপার
1
আমি মনে করি না এটা হবে। তবে ওয়ার্কগ্রুপগুলি কী করছে সে সম্পর্কে আমি অবগত নই।
— টাইপ-স্টাইল
8

আরে আমি শুধু এটি লিখেছি।

এখন আপনি ব্যবহার করতে পারেন <div style="color: red; @media (max-width: 200px) { color: green }">বা তাই।

উপভোগ করুন।

— Пронин Пронин
সূত্র
আমি এটিকে ভোট দিয়েছি, যেহেতু মনে হয়েছিল ততক্ষণে এটি কাজ করবে, তবে তা হয়নি। # সাদ
— হনক 31
@ হনক 31 এটি কেবলমাত্র একটি শাসনের জন্য বিশ্ব
— Пронин
7

আমি এটি পরীক্ষা করার চেষ্টা করেছি এবং এটি কাজ করে বলে মনে হচ্ছে না তবে অ্যাপল কেন এটি ব্যবহার করছে তা আমি আগ্রহী। আমি ঠিক https://linkmaker.itunes.apple.com/us/ এ ছিলাম এবং উত্পন্ন কোডটিতে লক্ষ্য করা গেছে যে আপনি যদি 'লার্জ বোতাম' রেডিও বোতামটি নির্বাচন করেন তবে তারা একটি ইনলাইন মিডিয়া ক্যোয়ারী ব্যবহার করছে।

<a href="#" 
    target="itunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

দ্রষ্টব্য: পঠনযোগ্যতার জন্য যুক্ত লাইন ব্রেকগুলি, মূল উত্পন্ন কোড ক্ষুদ্রাকরণ করা হবে

— davidcondrey
সূত্র
3
অ্যাপল কেন / কীভাবে এটি ব্যবহার করছে তা জানতে চাই
— ডগলাস.সেসার
1
প্রদত্ত লিঙ্কে উদ্ধৃত কোডটি আর বিদ্যমান নেই (কমপক্ষে আমার জন্য; সম্ভবত আমেরিকার বাইরে থাকার কারণে আমি বিভিন্ন সামগ্রী পেয়েছি)। তদ্ব্যতীত, এটিকে আরও একটি পৃথক প্রশ্নের মতো বলে মনে হচ্ছে যা উত্তর।
— মার্ক অ্যামেরি
1
আমি একটি বাগ প্রতিবেদন জমা দিয়েছি এবং আমি বিশ্বাস করি যে তারা তখন থেকে এটি সরিয়ে নিয়েছে। itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
— ডেভিডকন্ড্রে
4

আপনি চিত্র-সেট ব্যবহার করতে পারেন ()

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">
— the7oker
সূত্র
2
— কিউকিউই
এটি আকারের ভিত্তিতে (প্রশ্নটিতে বর্ণিত হিসাবে) কাজ করে না তবে জুম ফ্যাক্টরের উপর ভিত্তি করে কাজ করে, তাই আপনি 27 "2560x1440 স্ক্রিনে ছোট পর্দার জন্য ছবিটি পেতে পারেন। এটি আপনি যা চান তা হতে পারে - বা নাও হতে পারে।
— জানু বুহেলার
4

হ্যাঁ, আপনি উইন্ডো.ম্যাচমিডিয়া দ্বারা জাভাস্ক্রিপ্ট দিয়ে করতে পারেন

  1. লাল রঙের পাঠ্যের জন্য ডেস্কটপ

  2. সবুজ রঙের পাঠ্যের জন্য ট্যাবলেট

  3. নীল রঙের পাঠ্যের জন্য মোবাইল

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>
স্নিপেট প্রসারিত করুন

— ßãlãjî
সূত্র
3

সাসের জন্য ব্রেকপয়েন্টের মতো কিছু ব্যবহার করে ইনলাইন মিডিয়া ক্যোয়ারীগুলি সম্ভব

এই ব্লগ পোস্টটি আলাদা ব্লকের চেয়ে কীভাবে ইনলাইন মিডিয়া প্রশ্নগুলি আরও পরিচালনাযোগ্য তা ব্যাখ্যা করে একটি ভাল কাজ করে: কোনও ব্রেকপয়েন্ট নেই

ইনলাইন মিডিয়া প্রশ্নের সাথে সম্পর্কিত হ'ল "উপাদান অনুসন্ধানগুলি" ধারণাটি, কয়েকটি আকর্ষণীয় পাঠ্য হ'ল:

  1. উপাদানগুলির জন্য মিডিয়া প্রশ্নের উপর চিন্তাভাবনা
  2. মিডিয়া ক্যোয়ারী হ্যাক
  3. মিডিয়া প্রশ্নগুলির উত্তর নয়: এলিমেন্ট ক্যোয়ারী পলিফিল
  4. অন্য যদি অবরুদ্ধ
— রাফায়েল লেডার
সূত্র
1

আপনি যদি প্রিন্ট সিএসএস ফাইলটিতে নিয়ম যুক্ত করেন তবে আপনাকে @ মিডিয়া ব্যবহার করতে হবে না।

আমি কিছু স্মার্ট ফর্চাকে এটিকে অন্তর্ভুক্ত করেছি যা আমি কিছু উপাদানকে পটভূমির রঙ দিতে ব্যবহার করি।

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
স্নিপেট প্রসারিত করুন

— পল ওলবার্স
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.