অন্য একটি সিএসএস ফাইল অন্তর্ভুক্ত করা সম্ভব?


779

অন্য একটি সিএসএস ফাইল অন্তর্ভুক্ত করা সম্ভব?


26
কেবলমাত্র একটি ফাই, এটি করা কোনও এইচটিটিপি অনুরোধ সংরক্ষণ করে না। এটি আপনাকে অন্য কোথাও আমদানিকৃত .css ফাইল অন্তর্ভুক্ত করা থেকে বাঁচায়।
টি। ব্রায়ান জোন্স

1
আমি আগে আর কোনও সিএসএস অন্তর্ভুক্ত হওয়ার মতোই ছিলাম এবং অনুশীলনের সেরা নয়
গাইজকা অ্যালেন্ডে

উত্তর:


1084

হ্যাঁ:

@import url("base.css");

বিঃদ্রঃ:

  • @importনিয়ম আগে বসে আবশ্যক (-setup অন্যান্য সব নিয়ম @charset)।
  • অতিরিক্ত @importবিবৃতিগুলির জন্য অতিরিক্ত সার্ভারের অনুরোধ প্রয়োজন। বিকল্প হিসাবে, একাধিক এইচটিটিপি অনুরোধ এড়াতে সমস্ত সিএসএসকে একটি ফাইলে সংযুক্ত করুন। উদাহরণস্বরূপ, বিষয়বস্তু কপি base.cssএবং special.cssমধ্যে base-special.cssএবং শুধুমাত্র রেফারেন্সের base-special.css

143

হ্যাঁ. অন্য সিএসএস ফাইলে সিএসএস ফাইল আমদানি করা সম্ভব।

এটি অবশ্যই @ আমদানি নিয়ম ব্যবহার করে স্টাইল শীটে প্রথম নিয়ম হওয়া উচিত ।

@import "mystyle.css";
@import url("mystyle.css");

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

পড়ুন এই তালিকায় ব্রাউজার সমর্থনের জন্য।


42

@import url("base.css");মনের মধ্যে জরিমানা কিন্তু ভালুক কাজ করে যে @importবিবৃতি সার্ভারে কোনও নতুন অনুরোধ। এটি আপনার পক্ষে সমস্যা নাও হতে পারে তবে যখন সর্বোত্তম পারফরম্যান্স প্রয়োজন তখন আপনার এড়ানো উচিত @import


2
সিএসএস ফাইল ক্যাশে করা হয় না? সুতরাং এটি শুধুমাত্র একবার ফাইল অনুরোধ করতে যাচ্ছি? উদ্বিগ্ন হতে তুচ্ছ মনে হচ্ছে।
এন্ডোলিথ

1
আপনি যদি নিজের সিএসএসকে একটি ফাইলে মিন্ট করছেন না তবে হ্যাঁ আপনি সঠিক তবে এটি একবার হয়ে গেলে আপনি কেবল একটি সিএসএস ফাইল কল করছেন। আমি অবশ্যই ভুল হলে আমাকে সংশোধন করুন।
mjwrazor



11

কিছু ক্ষেত্রে @Import "file.css" ব্যবহার করা সম্ভব এবং বেশিরভাগ আধুনিক ব্রাউজারগুলিকে এটি সমর্থন করা উচিত, এনএন 4 এর মতো পুরানো ব্রাউজারগুলি কিছুটা বাদামে চলে যাবে।

দ্রষ্টব্য: আমদানির বিবৃতিটি অবশ্যই ফাইলের অন্যান্য সমস্ত ঘোষণার আগে অবশ্যই তৈরি করতে হবে এবং এটি উত্পাদনে ব্যবহারের আগে এটি আপনার সমস্ত টার্গেট ব্রাউজারে পরীক্ষা করতে হবে।



6

হ্যাঁ এটি সম্ভব হয় @Import ব্যবহার করে এবং CSS ফাইলের পথ সরবরাহ করা

@import url("mycssfile.css");

অথবা

@import "mycssfile.css";

6

@import("/path-to-your-styles.css");

CSS ব্যবহার করে কোনও CSS স্টাইলশীটের মধ্যে সিএসএস স্টাইলশিট অন্তর্ভুক্ত করার সেরা উপায় এটি।


6

"@ ইমপোর্ট" বিধি একাধিক স্টাইল ফাইলগুলিতে কল করতে পারে। এই ফাইলগুলি ব্রাউজার বা ব্যবহারকারী এজেন্ট দ্বারা ডাকা হয় যখন প্রয়োজন হয় যেমন HTML ট্যাগগুলি সিএসএসকে কল করে।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

সিএসএস ফাইল "main.css" এ নিম্নলিখিত সিনট্যাক্স ধারণ করে:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

শৈলীর উপাদান সন্নিবেশ করতে createTexNode অভ্যন্তরীণ এইচটিএমএল ব্যবহার করবেন না :

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>

কেবল উল্লেখ করার জন্য, যখন @ হিপ্প ইঙ্গিত করছে যে আমদানি (ক্লাস projectionএবং screen?) থেকে ক্লাসগুলি ওভাররাইড করা সম্ভব এটি সাধারণত কখনই করা ভাল নয়। ;)
টিসিএল

2
@import url('style.css');

সেরা উত্তরের বিপরীতে, এইচটিটিপি / ২.০ ব্যবহার করার সময় সমস্ত সিএসএস ফাইল একত্রে একত্রিত করার পরামর্শ দেওয়া হয় না


2

আলটারভিস্তা এবং ওয়ার্ডপ্রেস সহ বুটস্ট্র্যাপ আমদানি করুন

আমি ওয়ার্ডপ্রেস সহ আলটারভিস্টায় বুটস্ট্র্যাপ সিএসএস আমদানি করতে এটি ব্যবহার করি

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

এবং এটি সূক্ষ্মভাবে কাজ করে, কারণ এটি কোনও পৃষ্ঠায় রাখলে এইচটিএমএল লিঙ্ক রিল কোডটি মুছে ফেলা হবে


1

হ্যাঁ আপনি সহজেই অন্য কোনও সিএসএস আমদানি করতে পারেন (ওয়েবসাইট যে কোনও জায়গায়) আপনার ব্যবহার করতে হবে:

@import url("url_path");

1

যে কারণেই হোক না কেন, @ ইম্পোর্ট আমার পক্ষে কাজ করেনি, তবে এটি কি আসলেই প্রয়োজনীয় নয়?

পরিবর্তে এইচটিএমএল এর মধ্যে আমি যা করেছি তা এখানে:

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

লক্ষ্য করুন যে মিডিয়া = "মুদ্রণ" এর 2 টি স্টাইলশিট রয়েছে: মায়াপ-মুদ্রণ.কম এবং মায়াপ-স্ক্রিন.কম। এটি মাইপ-স্ক্রিন.এসএসএস-এর মধ্যে মাইপ-স্ক্রিন.এসএস অন্তর্ভুক্ত একই প্রভাব।


না, এটি সঠিক নয়। এটি একটি HTML ফাইলের মধ্যে থেকে একাধিক সিএসএস ফাইলগুলি অন্তর্ভুক্ত করছে, অন্য কোনও সিএসএস ফাইলের মধ্যে কোনও সিএসএস ফাইল অন্তর্ভুক্ত নয়।
টাইলার এইচ


0

আমি main.css ফাইল তৈরি করেছি এবং এতে সমস্ত CSS ফাইল অন্তর্ভুক্ত করেছি।

আমরা কেবল একটি মেইন সিএসএস ফাইল অন্তর্ভুক্ত করতে পারি

@import url('style.css');
@import url('platforms.css');

-3

আমি এতে হোঁচট খেয়েছি এবং আমি কেবল বলতে চেয়েছিলাম দয়া করে সিএসএসে @ আমদানি ব্যবহার করবেন না !!!! আমদানি বিবৃতিটি ক্লায়েন্টকে প্রেরণ করা হয় এবং ক্লায়েন্টটি অন্য অনুরোধ করে। আপনি যদি নিজের সিএসএসকে বিভিন্ন ফাইলের মধ্যে ভাগ করতে চান তবে কম ব্যবহার করুন। কম ক্ষেত্রে আমদানি বিবৃতিটি সার্ভারে ঘটে এবং আউটপুট ক্যাশে হয় এবং ক্লায়েন্টকে অন্য সংযোগ তৈরি করতে বাধ্য করে পারফরম্যান্স পেনাল্টি তৈরি করে না। সাস হ'ল একটি বিকল্প যা আমি অনুসন্ধান করেছি not সত্যই, আপনি যদি কম বা সাস ব্যবহার না করেন তবে আপনার শুরু করা উচিত। http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html


1
এই ক্লায়েন্টটি অন্য কোনও অনুরোধ করবে, অন্য সংযোগ নয়। এবং মানের জন্য এটি আমদানি CSS ব্যবহার করার একটি ভাল উপায়। প্রকল্পের সাহায্যে বড় হওয়া এবং বড় হওয়া সিএসএস ফাইলের পরিবর্তে সেগুলি আমদানি করা আরও ভাল ...
YvesR

3
এই উভয় গুগল (সুপারিশ করা হয় developers.google.com/speed/docs/best-practices/... ) এবং ইয়াহু ( developer.yahoo.com/performance/rules.html#csslink )
WillSeitz

1
তবুও - এটি আরও একটি অনুরোধ। সম্পূর্ণ পৃষ্ঠা লোডের জন্য সম্ভাব্য কয়েকশো এর মধ্যে।
স্টিভ বেনেট

8
রাইট ?! আর একটি অনুরোধ আর্ম-ওয়েভিং এবং সমস্ত ক্যাপ অস্বীকারকারীকে কঠোরভাবে সতর্ক করবে rants একটি অনুরোধ খারাপ অভ্যাস নয়। উত্তরের উত্তর -1 - কম এবং SASS কার্গো কাল্ট।
ক্রিস বেকার

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