সিএসএস ফাইলে আপেক্ষিক ইউআরএল ব্যবহার করে এটি কোন অবস্থানের সাথে সম্পর্কিত?

Question

কোনও সিএসএস ফাইলে ব্যাকগ্রাউন্ড ইমেজ URL এর মতো কোনও সংজ্ঞা দেওয়ার সময়, কোনও আপেক্ষিক URL ব্যবহার করার সময়, এটি কোথায় সম্পর্কিত? উদাহরণ স্বরূপ:

ধরুন ফাইলটিতে /stylesheets/base-styles.cssরয়েছে:

div#header { 
    background-image: url('images/header-background.jpg');
}

আমি যদি এই স্টাইল-শিটটি বিভিন্ন দস্তাবেজের মধ্যে অন্তর্ভুক্ত করি <link ... />তবে সিএসএস ফাইলের আপেক্ষিক ইউআরএলটি স্টাইলশিট নথির সাথে সম্পর্কিত হবে /stylesheets/বা এটি বর্তমানের নথির সাথে সম্পর্কিত? সম্ভাব্য পাথ:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

Answer 1

ডব্লিউ 3 অনুসারে :

আংশিক ইউআরএলগুলি দস্তাবেজের সাথে তুলনামূলক নয়, স্টাইল শীটের উত্সের তুলনায় ব্যাখ্যা করা হয়

অতএব, আপনার প্রশ্নের উত্তর, এটা আপেক্ষিক হতে হবে /stylesheets/।

আপনি যদি এটির বিষয়ে চিন্তা করেন তবে এটি অর্থবোধ করে, যেহেতু সিএসএস ফাইলটি বিভিন্ন ডিরেক্টরিতে পৃষ্ঠাগুলিতে যুক্ত করা যেতে পারে, সুতরাং এটি সিএসএস ফাইলের সাথে মানক করার অর্থ হ'ল স্টাইলশিটগুলি যেখানে লিঙ্কযুক্ত সেখানে URL গুলি কাজ করবে।

Comments

দেখে মনে হচ্ছে নিয়মটির ব্যতিক্রম আছে: -ms-behavior

— আইআই

অন্য একটি ব্যতিক্রম আছে: যখন ইউআরএলটি একটি কাস্টম সম্পত্তির ডিফল্ট মান। বলুন আপনি সংজ্ঞায়িত করেছেন .banner { background-image: var(--bgimg, url('images/default.jpg')); }তবে --bgimgএখনও এর জন্য কোনও মান নির্ধারণ করবেন না । তারপরে পৃষ্ঠায় /index.html, একটি .bannerসন্ধান করবে /images/default.jpgতবে অন্য পৃষ্ঠায় /about/index.htmlএকটি .bannerসন্ধান করবে /about/images/default.jpg। খুব ভাঙা আইএমও

— ছারভে

সংশোধন: উপরে ডিফল্ট মান বাগটি Chrome v60 এ ঠিক করা হয়েছে।

— ছারভে

যদি আপনার সিএসএস একটি বান্ডেলে থাকে তবে পথটি আসলেই কিছু যায় আসে না। আপনি যেখানে ভাবেন যে এটি হতে চলেছে তা নয়, আর কিছুই আপেক্ষিক নয়।

— টড

বৈশিষ্ট্যগুলি ব্যবহার করার সময় আমার সমস্যা ছিল: background: var(--primary-color-background) no-repeat center center url("maps.jpg");এটি আইওএস এবং সাফারিতে কাজ করে না। /resources/maps.jpgসাফারিতে কেবলমাত্র সিএসএস বৈশিষ্ট্যের সাথে একত্রে পরম পাথ কাজ করে।

— অ্যান্ডি

Answer 2

এটি সিএসএস ফাইলের সাথে সম্পর্কিত।

Answer 3

এটি স্টাইলশিটের সাথে তুলনামূলক, তবে আমি ইউআরএলকে আপনার ইউআরএলের সাথে সম্পর্কিত করার পরামর্শ দেব:

div#header { 
  background-image: url(/images/header-background.jpg);
}

এইভাবে, আপনি ভবিষ্যতে রিফ্যাক্টরের প্রয়োজন ছাড়াই আপনার ফাইলগুলি এদিক ওদিক সরিয়ে নিতে পারেন।

Comments

সামনের অতিরিক্ত "/" কী পার্থক্য করে?

— কেসব্যাশ

কমান্ড লাইনের পথের নামগুলির মতোই, পথের সামনের দিকে / অগ্রভাগের অর্থ এটি বর্তমান ওয়েব সার্ভারের একটি পরম সংস্থানকে নির্দেশ করে।

— ডেভিড ডব্লু। কিথ

আসলে এমন একটি ক্ষেত্রে রয়েছে যেখানে সিএসএস ফাইলের তুলনায় ইউআরআই ব্যবহার করা ভাল। আমার ক্ষেত্রে, আমার একটি ডিরেক্টরি "/ সিএসএস /" আছে যেখানে আমি সমস্ত সিএসএস ডেটা রেখেছি। এখন, আমি একটি পৃথক ফোল্ডারে ওয়েবসাইটে নতুন বৈশিষ্ট্যগুলি পরীক্ষা করতে চাই। এটি পরীক্ষা করা শক্ত হয়ে যায়, যেমন, পরীক্ষার ফোল্ডারে নতুন পটভূমি চিত্রগুলি।

— ডিয়েগো

নিখুঁত পাথগুলি ডোমেনের সাবফোল্ডারে সমাধান দেওয়া কঠিন করে তোলে। আপনি সাবফোল্ডারগুলিকে সমর্থন করতে চান এমন অনেকগুলি কারণ রয়েছে। এটি টেস্টিং করা সহজ করে তোলে (ডিয়েগো উল্লিখিত হিসাবে) যেখানে আপনার পূর্ববর্তী সংস্করণ / প্রাক-প্রকাশগুলি একই ডোমেনে প্রোড হিসাবে থাকতে পারে। ভবিষ্যত পরিবর্তনগুলি যেখানে এসএসও সমর্থন করার জন্য কর্পোরেট প্রক্সি সার্ভারগুলি সেট আপ করা হয়, সমস্ত সমাধানকে একটি ডোমেনে সরানো ইত্যাদি Especially আমার জন্য এই বিবেচনাগুলি "আমার .css-file সরানো সহজ" চেয়ে অনেক বেশি গুরুত্বপূর্ণ।

— টেড হানসেন

চিত্রগুলি এবং স্টাফগুলি যেভাবেই হোক সিডিএনতে যায় তাই এটি নিখুঁত

— মুহাম্মদ উমার

Answer 4

মডুলার স্টাইল শিটগুলি তৈরি করার জন্য যা কোনও সংস্থার নিখরচায় অবস্থানের উপর নির্ভর করে না, লেখকরা আপেক্ষিক ইউআরআই ব্যবহার করতে পারেন। আপেক্ষিক ইউআরআইগুলি ( [আরএফসি 3986] অনুসারে সংজ্ঞায়িত ) একটি বেস ইউআরআই ব্যবহার করে সম্পূর্ণ ইউআরআইতে সমাধান করা হয়। আরএফসি 3986, বিভাগ 5, এই প্রক্রিয়াটির জন্য আদর্শ অ্যালগরিদম সংজ্ঞায়িত করে। সিএসএস স্টাইল শিটের জন্য, বেস ইউআরআই হ'ল স্টোর শিটটি, উত্স নথির নয়।

উদাহরণস্বরূপ, ধরুন নিম্নলিখিত নিয়ম:

body { background: url("yellow") }

ইউআরআই দ্বারা মনোনীত স্টাইল শীটে অবস্থিত:

http://www.example.org/style/basic.css

উত্স নথির BODY এর পটভূমিটি ইউআরআই কর্তৃক নির্ধারিত সংস্থান দ্বারা বর্ণিত চিত্রের সাথে টাইল করা হবে

http://www.example.org/style/yellow

ব্যবহারকারীর এজেন্টগুলি কীভাবে অবৈধ ইউআরআই বা ইউআরআইকে হ্যান্ডেল করে তা যেগুলি অনুপলব্ধ বা প্রয়োগযোগ্য সংস্থান হিসাবে মনোনীত করে তার মধ্যে তারতম্য হতে পারে।

সিএসএস 2.1 স্পেক থেকে নেওয়া ।

Answer 5

সিএসএস স্টাইল শিটের জন্য, বেস ইউআরআই হ'ল স্টোর শিটটি, উত্স নথির নয়।

(অন্য কিছু ভেঙে যাবে, আইএমএনএসএইচও)

Answer 6

একটি সমস্যা যা ঘটতে পারে এবং আপাতদৃষ্টিতে এটি ভাঙা হ'ল সিএসএসের অটো মিনিমাইজেশন ব্যবহার করার সময়। মিনিফায়েড বান্ডেলের জন্য অনুরোধের পাথটিতে মূল সিএসএসের চেয়ে আলাদা পথ থাকতে পারে। এটি স্বয়ংক্রিয়ভাবে ঘটতে পারে তাই এটি বিভ্রান্তির সৃষ্টি করতে পারে।

মিনিফায়েড বান্ডেলের জন্য ম্যাপ করা অনুরোধের পথটি "/ originalcssfolder / minifiedbundlename" কেবল "minifiedbundlename" নয়।

অন্য কথায়, আপনার ফান্ডেল কাঠামো হিসাবে (/ দিয়ে) একই পাথের জন্য আপনার বান্ডিলগুলির নাম দিন, ফন্ট, চিত্রের মতো কোনও বাহ্যিক সংস্থান ব্রাউজার দ্বারা ইউআরআই সংশোধন করার জন্য মানচিত্র তৈরি করবে। বিকল্পটি হ'ল পরম ইউআরএল (আপনার সিএসএসে রেফগুলি ব্যবহার করা তবে এটি সাধারণত কাম্য নয়)।

Comments

এটি আমার অনেক সময় বাঁচিয়েছে! ধন্যবাদ। এটি আরও নথিভুক্ত করা উচিত

— mjbates7

Answer 7

এটি আমার পক্ষে কাজ করেছে। দুটি বিন্দু এবং স্ল্যাশ যোগ করা।

body{
    background: url(../images/yourimage.png);
}

Answer 8

ব্যবহার করার চেষ্টা করুন:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images আপনি পোস্ট করতে চান ছবি হোল্ডার হচ্ছে।