সিএসএস সামগ্রী সম্পত্তি: পাঠ্যের পরিবর্তে এইচটিএমএল প্রবেশ করা সম্ভব?

Question

কেবল ভাবছেন যে কোনওভাবে এটির contentপরিবর্তে সিএসএস সম্পত্তি এইচটিএমএল কোড stringোকানো :beforeবা এর :afterমতো কোনও উপাদান তৈরি করা সম্ভব কিনা :

.header:before{
  content: '<a href="#top">Back</a>';
}

এটি বেশ সহজ হবে ... এটি জাভাস্ক্রিপ্টের মাধ্যমে করা যেতে পারে তবে এর জন্য সিএসএস ব্যবহার করা সত্যিই জীবনকে সহজ করে তুলবে :)

Comments

কাইদো ওএমজি ... এটি নয়, প্রশ্নের তারিখটি পরীক্ষা করে দেখেনি, আমি আপনার উত্তরটি উল্লেখ করেছি ... সত্যিই দুঃখিত, এই দুটি মন্তব্য মুছে ফেলবে :)

— আসন

Answer 1

দুর্ভাগ্যক্রমে, এটি সম্ভব নয়। প্রতি অনুমান :

উত্পন্ন সামগ্রী ডকুমেন্ট ট্রিকে পরিবর্তন করে না। বিশেষত, এটি ডকুমেন্ট ল্যাঙ্গুয়েজ প্রসেসরের কাছে ফিরে খাওয়ানো হয় না (উদাহরণস্বরূপ, পুনর্বিবেচনার জন্য)।

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

উদাহরণস্বরূপ, নিম্নলিখিত HTML সহ প্রদত্ত সিএসএস ব্যবহার করে:

<h1 class="header">Title</h1>

... নিম্নলিখিত ফলাফলের ফলাফল হবে:

<a href="#top"> পিছনে </a> শিরোনাম

Comments

সম্মত হয়েছে, তবে আপনি যদি ভাবেন যে এটি ইতিমধ্যে urlবৈশিষ্ট্যযুক্ত চিত্রগুলির জন্য সমর্থন করে তবে একটি লিঙ্ক যুক্ত করা এই দৃষ্টিকোণে আলাদা হবে না।

— zanona

@ উপডিকো: এটি কারণ যে চিত্রগুলি নিজেরাই ডোম উপাদান নয় (গণনা করা <img>হচ্ছে না ), সেগুলি কেবল বিদ্যমান উপাদানগুলিতে আঁকা হচ্ছে, সুতরাং পটভূমি বা তালিকার চিত্রগুলি প্রয়োগ করে আপনি সত্যই ডিওএম সংশোধন করছেন না।

— বোল্টক্লক

এটি পেয়েছে ধন্যবাদ, তাই আমি মনে করি আমাকে এই ধারণাটি পাস করতে হবে এবং সরাসরি

— জেএস

@ বিডিকো: ভাল প্রশ্ন এমনকি আমি এসও এর মাধ্যমে অনুসন্ধান করে যাচ্ছিলাম আশা করে এটি সম্ভব হয়েছিল।

— রবিন মাবেন

@ ওয়াটসন: অন্য প্রশ্নের উত্তরটি আপনার সবেমাত্র দেখেছেন। তুমি ঠিক বলছো; আমার উত্তরটিতে সম্ভবত আমার স্পষ্ট করা উচিত যে আপনি নির্বিচারে মার্কআপ যোগ করতে পারবেন না - আপনাকে url()অন্য কোনও চিত্রের মতো পরিবর্তে আপনাকে একটি বাহ্যিক ফাইল নির্দিষ্ট করতে হবে ।

— বোল্টক্লক

Answer 2

@ বোল্টক্লকের উত্তরের মন্তব্যগুলিতে প্রায় উল্লিখিত হিসাবে, আধুনিক ব্রাউজারগুলিতে , আপনি আসলে এসভিগির উপাদানগুলির url()সাথে মিলিয়ে ( ) ব্যবহার করে সিউডো-এলিমেন্টগুলিতে কিছু এইচটিএমএল মার্কআপ যুক্ত করতে পারেন <foreignObject>।

আপনি হয় কোনও আসল এসভিজি ফাইলকে নির্দেশ করে একটি ইউআরএল নির্দিষ্ট করতে পারেন, বা এটি একটি ডেটা ইউআরআই সংস্করণ দিয়ে তৈরি করতে পারেন ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

তবে লক্ষ্য করুন যে এটি বেশিরভাগ হ্যাক এবং এখানে অনেকগুলি সীমাবদ্ধতা রয়েছে:

• আপনি এই মার্কআপ থেকে কোনও বাহ্যিক সংস্থান লোড করতে পারবেন না (কোনও সিএসএস নেই, কোনও চিত্র নেই, কোনও মিডিয়া নেই)।
• আপনি স্ক্রিপ্ট কার্যকর করতে পারবেন না।
• যেহেতু এটি ডিওমের অংশ হবে না, এটির পরিবর্তনের একমাত্র উপায় হ'ল মার্কআপটিকে ডেটা ইউআরআই হিসাবে পাস করা এবং এই ডেটা ইউআরআই সম্পাদনা করা document.styleSheets। এই অংশ জন্য, DOMParserএবং সাহায্যXMLSerializer করতে পারে ।
• একই ক্রিয়াকলাপটি আমাদের ইউআরএল-এনকোডযুক্ত মিডিয়াগুলিকে <img>ট্যাগগুলিতে লোড করতে দেয় , তবে এটি ছদ্ম-উপাদানগুলিতে কাজ করবে না (কমপক্ষে আজ পর্যন্ত, আমি জানি না এটি কোথাও নির্দিষ্ট করা হয়েছে কিনা তা উচিত নয়, তাই এটি হতে পারে একটি এখনও বাস্তবায়িত বৈশিষ্ট্য হতে হবে)।

এখন, সিউডো উপাদানটিতে কিছু এইচটিএমএল মার্কআপের একটি ছোট ডেমো:

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>

Comments

আমি আপনার উত্তর জুড়ে এসেছি, এবং এটি আমার নিজের কয়েকটি সমস্যার সমাধান। আপনি কীভাবে কোনও ফাইলের দিকে ইঙ্গিত করে ইউআরএল ফর্ম্যাট করবেন তা ব্যাখ্যা করতে পারেন? আমি চেষ্টা করেছি url('/relativePathToMySvg/mySvg.svg')এবং এটি কার্যকর হয়নি

— ফ্রাঙ্ক

@ স্প্যাঙ্ক, প্রতি স্প্যাকস অনুসারে, আপেক্ষিক পাথ ব্যবহার করা আপনার সিএসএস ফাইলের পাথের সাথে সম্পর্কিত হবে, যদি আপনি নিজের সিএসএস ফাইলটি পেয়ে থাকেন /root/css/yourFile.cssতবে yourFile.svgতার মতো কোনও আপেক্ষিক ফানকিআইআরআই নির্দেশ করবে /root/css/yourFile.svg/। তবে, আমি মনে করি আমার মনে আছে যে আগের কিছু সংযুক্ত আরব আমিরাতে একটি বাগ ছিল এবং এটি নথির বেসুরির সাথে তুলনা করে তৈরি করেছিল। তাই সুরক্ষিত উপায় হ'ল নিখুঁত পথ ব্যবহার করা।

— কাইদো

@ বলটকলক, সত্যিই? আমি এটি সম্পর্কে সত্যই দুঃখিত। আমি এই অন্য 6 বছরের পুরানো প্রশ্নটিতে অন্য একজনের কাছে এসেছিলাম এবং অনুভব করেছি যে এটি আপডেট হিসাবে পোস্ট করতে হবে, তবে সম্ভবত আমার উত্তরটি আরও ভাল হওয়া উচিত, এবং 6 বছর আগে অবশ্যই সঠিক ছিল? অথবা যদি আপনার কিছু ভাল শব্দ থাকে যা শিরোনাম হিসাবে ফিট করতে পারে তবে আমার উত্তরটি সম্পাদনা করতে দ্বিধা বোধ করুন।

— কাইদো

খুশী হলাম। আমি ব্যবহার করেছি: content: url('../../images/como-funciona.svg');এবং এটি দুর্দান্ত কাজ করে

— এলিয়ট ইসলস

এখানে আমার একটি পূর্ববর্তী পোস্ট রয়েছে, যার উত্তর আমার রয়েছে, যা এই বিষয়টিকে আরও গভীরভাবে ডুবিয়ে দিয়েছে: এটি-এটি সম্ভব-থেকে-প্রদর্শন-কোনও-এইচটিএমএল-নথি-বা-এইচটিএমএল-খণ্ড-এ-সিএসএস-সামগ্রী

— আসন

Answer 3

CSS3 পেজযুক্ত মিডিয়াতে এটি ব্যবহার position: running()এবং সম্ভব content: element()।

পেজড মিডিয়া মডিউল খসড়ার জন্য সিএসএস উত্পাদিত সামগ্রী থেকে উদাহরণ :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner যে কোনও উপাদান হতে পারে এবং headingএটি স্লটের এক স্বেচ্ছাসেবী নাম।

সম্পাদনা: পরিষ্কার করার জন্য, মূলত ব্রাউজারের কোনও সমর্থন নেই তাই এটি বেশিরভাগই ভবিষ্যতের রেফারেন্সের জন্য ছিল / ইতিমধ্যে দেওয়া 'ব্যবহারিক উত্তরগুলি' ছাড়াও।

Comments

আরে, আপনি এই আরও কিছুটা ব্যাখ্যা করতে পারেন? আমি আপনার তত্ত্বের প্রতি আগ্রহী কিন্তু এটি সম্পাদন করতে পারে বলে মনে হচ্ছে না। আমি কীভাবে এই পদ্ধতি বা একটি ডিভ ব্যবহার করে একটি অ্যাঙ্কর ট্যাগ অন্তর্ভুক্ত করব, বলব।

— নিল

সমস্যাটি হ'ল বর্তমানে মূলত কোনও ব্রাউজার সমর্থন নেই, তবে উত্সর্গীকৃত এইচটিএমএল রেন্ডাররা নির্দিষ্ট হিসাবে এটি প্রয়োগ করে। পরবর্তী খুব ভাল-সুসংবাদটি হ'ল কোনও ভাল ওপেন সোর্স বাস্তবায়ন বলে মনে হচ্ছে না; প্রিন্সেক্সএমএমএল.কমের মতো সস পণ্যগুলি বেশিরভাগ ।

— sol