সিএসএস অন্তর্ভুক্ত করার সেরা উপায়? @ আইপোর্ট কেন ব্যবহার করবেন?

Question

মূলত আমি ভাবছি যে @importবিদ্যমান স্টাইলশীটে স্টাইলশিট আমদানি করার সুবিধার্থ / উদ্দেশ্য কী এবং কেবল অন্যটি যুক্ত করা ...

<link rel="stylesheet" type="text/css" href="" />

নথির মাথায়?

Comments

পোর্টেবিলিটিটি প্রথমে মনে আসে। আপনি যদি বিভিন্ন পৃষ্ঠায় সিএসএস ফাইলের একটি সেট অন্তর্ভুক্ত করতে চান তবে 5 পৃষ্ঠার চেয়ে প্রতিটি পৃষ্ঠায় কেবল একটি সিএসএস ফাইল লিঙ্ক করা সহজ এবং আরও রক্ষণাবেক্ষণযোগ্য হতে পারে

— xbonez

@ এক্সবোনজ: যদিও এই জাতীয় বেশিরভাগ পরিস্থিতিতে অন্যান্য সাধারণ এইচটিএমএল উল্লেখযোগ্য পরিমাণে জড়িত থাকে, তাই সাধারণত কোনও টেম্পলেটে উভয় স্টাইলশিটকে লিঙ্ক করা ভাল।

— ডাস্কউফ -অ্যাক্টিভ-

খারাপ পুরাতন দিনগুলিতে, @ ইম্পোর্ট "ভাল" ব্রাউজার (নেটস্কেপ 4, আই 5) এবং খারাপ ব্রাউজার (আই 3, এন 3) উভয় সমর্থন করতে সমর্থ ছিল। আজকাল, এটি প্রায় অকেজো।

— এমডিডিডব্লু

stevesouders.com/blog/2009/04/09/dont-use-import

— ছারভে

<LINK> একটি হল অকার্যকর উপাদান মধ্যে HTML5 এর , তাই .. আপনি এটা স্ল্যাশ, মত ছাড়া ব্যবহার করতে পারেন <link rel="stylesheet" type="text/css" href="theme.css">।

— Ван

Answer 1

পৃষ্ঠার গতির দৃষ্টিকোণ থেকে, @importকোনও সিএসএস ফাইল থেকে প্রায় কখনও ব্যবহার করা উচিত নয়, কারণ এটি স্টাইলশিটগুলি একই সাথে ডাউনলোড হতে বাধা দিতে পারে। উদাহরণস্বরূপ, স্টাইলশিটে যদি পাঠ্য থাকে:

@import url("stylesheetB.css");

তারপরে প্রথম স্টাইলশিটটি ডাউনলোড না হওয়া পর্যন্ত দ্বিতীয় স্টাইলশিটটি ডাউনলোড শুরু নাও হতে পারে। অন্যদিকে, উভয় স্টাইলশিট <link>মূল HTML পৃষ্ঠায় উপাদানগুলিতে উল্লেখ করা থাকলে উভয়ই একই সময়ে ডাউনলোড করা যায়। উভয় স্টাইলশিট যদি সর্বদা একসাথে লোড হয় তবে এগুলি কেবল একটি একক ফাইলে একত্রিত করতে সহায়ক হতে পারে।

মাঝে মাঝে এমন পরিস্থিতি রয়েছে যেখানে @importউপযুক্ত, তবে নিয়ম নয় এগুলি সাধারণত ব্যতিক্রম।

Comments

There are occasionally situations where @import is appropriate@mediaবিভিন্ন ডিভাইসে বিভিন্ন স্টাইল প্রয়োগ করতে ব্যবহার করার মতো ।

— ডেরেক 朕 會 22

আর একটি কারণ @importহ'ল গুগল ফন্টের জন্য স্টাইল শীটটিতে উদ্বোধন করা (উদাহরণস্বরূপ @import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);), যাতে আপনাকে linkস্টাইলশীটটি ব্যবহার করে প্রতিটি পৃষ্ঠায় একটি পেস্ট করতে না হয়।

— cayhorstmann

যারা কৌতূহলী তাদের জন্য: আমার পছন্দসই ব্যবহারগুলির মধ্যে একটি @importহ'ল আপনি যখন কোনও বিল্ড প্রক্রিয়া সেট আপ করেন তখন এর মতো কিছু ব্যবহার করে grunt-concat-css। বিকাশের সময়, @importবিবৃতিগুলির কাজ এবং পৃষ্ঠাটির লোড গতি কোনও উদ্বেগ নয়। তারপরে, আপনি যখন উত্পাদনের জন্য তৈরি করছেন, তখন এর মতো একটি সরঞ্জাম আপনার সমস্ত সিএসএস ফাইল যথাযথভাবে জড়িত করে এবং সেটি সরিয়ে ফেলবে @import। আমি আমার জাভাস্ক্রিপ্ট ফাইল ব্যবহার করে একই জিনিস করি grunt-browserify।

— ব্র্যান্ডন

@ ডেরেক 朕 會 you আপনি যদি @importডিভাইস নির্দিষ্ট স্টাইল প্রয়োগ করতে ব্যবহার করেন তবে কেন কেবল <link>একটি মিডিয়া বৈশিষ্ট্যযুক্ত ট্যাগ ব্যবহার করবেন না ?

— জোমার সেভিলজো

@ মুহম্মদআসিফ @importদ্রুত হওয়ার কারণ নেই । আপনি সম্ভবত কিছু পরিমাপ নিদর্শন খুঁজছেন।

— ডাস্কউফ-অ্যাক্টিভটিভ-

Answer 2

আমি শয়তানের উকিল খেলতে যাচ্ছি, কারণ লোকেরা যখন খুব বেশি সম্মত হয় তখন আমি এটিকে ঘৃণা করি।

1. আপনার যদি স্টাইলশিট দরকার হয় যা অন্য কোনওটির উপর নির্ভর করে তবে @ আইম্পোর্ট ব্যবহার করুন। অপ্টিমাইজেশন একটি পৃথক পদক্ষেপে করুন।

আপনার কোডের পারফরম্যান্স এবং বিকাশকারীর কার্য সম্পাদন - দুটি নির্দিষ্ট ভেরিয়েবল আপনি যে কোনও সময়ে অপ্টিমাইজ করছেন । অনেকের ক্ষেত্রে, যদি সংখ্যাগরিষ্ঠ না হয় তবে বিকাশকারীকে আরও দক্ষ করে তোলা আরও গুরুত্বপূর্ণ , এবং কেবলমাত্র কোডটিকে আরও পারফরম্যান্ট করে তোলা ।

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

(এই ধরনের নির্ভরতা কখন ঘটবে? আমার মতে এটি খুব বিরল, সাধারণত একটি স্টাইলশিটই যথেষ্ট However তবে বিভিন্ন সিএসএস ফাইলে জিনিসগুলি রাখার জন্য কিছু যুক্তিযুক্ত স্থান রয়েছে :)

• থিমিং: আপনার যদি একই পৃষ্ঠার জন্য বিভিন্ন রঙের স্কিম বা থিম থাকে তবে সেগুলি কিছু ভাগ করতে পারে তবে সমস্ত উপাদান নয়।
• উপ-উপাদানগুলি: একটি স্বীকৃত উদাহরণ - বলুন আপনার কাছে একটি রেস্তোঁরা পৃষ্ঠা রয়েছে যাতে মেনু অন্তর্ভুক্ত রয়েছে। মেনুটি যদি বাকী পৃষ্ঠার থেকে খুব আলাদা হয় তবে এটি নিজের ফাইলটিতে থাকলে রক্ষণাবেক্ষণ করা সহজ হবে।

সাধারণত স্টাইলশীটগুলি স্বতন্ত্র থাকে, সুতরাং এগুলি ব্যবহার করে সেগুলি যুক্ত করা যুক্তিসঙ্গত <link href>। তবে, যদি তারা নির্ভরশীল শ্রেণিবিন্যাস হয় তবে আপনার এমন কাজ করা উচিত যা সবচেয়ে যুক্তিসঙ্গত বোধ করে।

পাইথন আমদানি ব্যবহার করে; সি ব্যবহার অন্তর্ভুক্ত; জাভাস্ক্রিপ্টের প্রয়োজন আছে। সিএসএস আমদানি করেছে; আপনি যখন এটি প্রয়োজন, এটি ব্যবহার করুন!

২. সাইটটি স্কেল করা দরকার এমন পর্যায়ে পৌঁছে গেলে, সমস্ত সিএসএসকে যুক্ত করে তুলুন।

যে কোনও ধরণের একাধিক সিএসএস অনুরোধগুলি - লিঙ্কগুলির মাধ্যমে বা @ আমদানির মাধ্যমে - উচ্চ কার্যকারিতা ওয়েবসাইটগুলির জন্য খারাপ অভ্যাস । আপনি যখন অপ্টিমাইজেশনের বিষয়টি সেই পর্যায়ে পৌঁছেছেন, আপনার সমস্ত সিএসএস একটি মিনিফায়ার দিয়ে প্রবাহিত হওয়া উচিত। সিএসমিন আমদানির বিবৃতি সংযুক্ত করে; @ ব্র্যান্ডন যেমন উল্লেখ করেছেন, গ্রান্টেরও এটি করার জন্য একাধিক বিকল্প রয়েছে। ( এই প্রশ্নটি দেখুন )।

একবার আপনি যখন মিনিকেড পর্যায়ে <link>চলে এসেছেন, তখন দ্রুত হয়, যেমন লোকেরা নির্দেশ করেছে, তাই বেশিরভাগ লিঙ্কটিতে কয়েকটি স্টাইলশিটের সাথে যুক্ত হন এবং সম্ভব হলে কোনওটিকেই ইমপোর্ট করবেন না।

সাইটটি যদিও উত্পাদন স্কেলে পৌঁছানোর আগে, কোডটি সুসংগত এবং যৌক্তিক হওয়া আরও বেশি গুরুত্বপূর্ণ, তার চেয়ে এটি কিছুটা দ্রুত গতিতে চলে যায়।

Comments

'খারাপ লোক' খেলার জন্য +1 করা সত্যই সেই বিষয়গুলিতে আরও বিস্তৃত দৃষ্টিতে অবদান রাখার বিষয়গুলি করে।

— হ্যারাগাস্টন

"যে কোনও ধরণের একাধিক সিএসএস অনুরোধ - লিঙ্কগুলির মাধ্যমে বা @ আমদানির মাধ্যমে - উচ্চ পারফরম্যান্সের ওয়েবসাইটগুলির জন্য খারাপ অভ্যাস" " মাল্টিপ্লেক্সিংয়ের কারণে এইচটিটিপি / ২ ব্যবহার করার সময় এটি খারাপ অভ্যাস নয়।

— gummiost

Answer 3

@importগতির কারণে কোনও পৃষ্ঠাতে সিএসএস অন্তর্ভুক্ত না করা ভাল । কেন নয় তা জানতে এই নিবন্ধটি দেখুন: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

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

সুতরাং: <link />পরিবর্তে ব্যবহার করুন @import।

Comments

উদাহরণস্বরূপ আপনি যদি গ্রান্ট ব্যবহার করছেন তবে আপনি কম্বাইন ব্যবহার করে @ আমদানির সুবিধাও নিতে পারেন। তারপরে আমদানি করা স্টাইলশিট এটি তৈরি করে এম্বেড করা হয়। আমার জন্য যা উভয় বিশ্বের সেরা অর্জন।

— বিজের্সিগ

Answer 4

লিঙ্ক পদ্ধতিটি ব্যবহার করে, স্টাইলশিটগুলি সমান্তরালভাবে (দ্রুত এবং আরও ভাল) লোড করা হয় এবং প্রায় সমস্ত ব্রাউজারগুলি লিঙ্ক সমর্থন করে

আমদানি কোনও অতিরিক্ত সিএসএস ফাইল একের পর এক (ধীর) লোড করে এবং আপনাকে আনস্টাইলযুক্ত সামগ্রীর ফ্ল্যাশ দিতে পারে

Answer 5

@ নেবো ইজনাড মিয়াও গ্রাগুর

নিম্নলিখিতটি নীচে ব্যবহারযোগ্য সমস্ত সঠিক উপায় imp

@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);

উত্স: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Answer 6

আমদানি কার্যকারিতা ব্যবহার করে মাথার মধ্যে একটি CSS স্টাইলশিট যুক্ত করার ক্ষেত্রে খুব বেশি পার্থক্য নেই। @importস্টাইলশিটগুলিকে শৃঙ্খলাবদ্ধ করতে সাধারণত ব্যবহার করা হয় যাতে সহজেই প্রসারিত করা যায়। এটি সহজেই কিছু সাধারণ সিএসএস সংজ্ঞা সাথে মিলিয়ে বিভিন্ন রঙের বিন্যাসগুলি অদলবদল করতে ব্যবহৃত হতে পারে। আমি বলব মূল সুবিধা / উদ্দেশ্য এক্সটেনসিবিলিটি।

আমি এক্সবোনজ মন্তব্যের সাথেও সম্মত হই যে বহনযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বেনিফিট যোগ করা হয়।

Answer 7

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

Answer 8

আমি যখন ইম্পোর্টটি ব্যবহার করি তখন একটি জায়গা হ'ল আমি যখন কোনও পৃষ্ঠার দুটি সংস্করণ, ইংরেজি এবং ফরাসী করি। আমি একটি মেইন সিএসএস ব্যবহার করে ইংরেজী ভাষায় আমার পৃষ্ঠা তৈরি করব। আমি যখন ফরাসী সংস্করণ তৈরি করি তখন আমি একটি ফরাসি স্টাইলশিটে লিঙ্ক করব (main_fr.css)। ফরাসী স্টাইলশিটের শীর্ষে, আমি মূল সিএসএস আমদানি করব এবং তারপরে ফ্রেঞ্চ সংস্করণে আমার যে অংশগুলির আলাদা প্রয়োজন সেগুলির জন্য নির্দিষ্ট নিয়মগুলি পুনরায় সংজ্ঞায়িত করব।

Answer 9

Http://webdesign.about.com/od/beginningcss/f/css_import_link.htm থেকে উদ্ধৃত

@ আমদানি পদ্ধতির মূল উদ্দেশ্যটি কোনও পৃষ্ঠায় একাধিক স্টাইল শীট ব্যবহার করা তবে আপনার <হেড> এর মধ্যে একটি লিঙ্ক। উদাহরণস্বরূপ, কোনও কর্পোরেশনের সাইটের প্রতিটি পৃষ্ঠার জন্য একটি গ্লোবাল স্টাইল শীট থাকতে পারে, উপ-বিভাগে অতিরিক্ত স্টাইল রয়েছে যা কেবলমাত্র সেই উপ-বিভাগে প্রযোজ্য। উপ-বিভাগের স্টাইল শিটের সাথে লিঙ্ক করে এবং style স্টাইল শীটের শীর্ষে বৈশ্বিক শৈলীগুলি আমদানি করে, আপনাকে সাইটের এবং প্রতিটি উপ-বিভাগের জন্য সমস্ত স্টাইল সহ একটি বিশাল স্টাইল শীট বজায় রাখতে হবে না। কেবলমাত্র প্রয়োজনীয়তা হল আপনার বাকী শৈলীর বিধিগুলির আগে যে কোনও @ আমদানি বিধিগুলি আসা উচিত। এবং মনে রাখবেন যে উত্তরাধিকার এখনও একটি সমস্যা হতে পারে।

Answer 10

কখনও কখনও আপনাকে ইনপ্লাইনের বিপরীতে @ ইম্পোর্ট ব্যবহার করতে হয়। আপনি যদি একটি জটিল অ্যাপ্লিকেশনটিতে কাজ করছেন যা 32 বা ততোধিক সিএসএস ফাইল রয়েছে এবং আপনাকে অবশ্যই আই 99 সমর্থন করতে হবে, কোনও বিকল্প নেই। আইই 9 প্রথম 31 এর পরে যে কোনও সিএসএস ফাইলকে উপেক্ষা করে এবং এর মধ্যে এবং ইনলাইন সিএসএস অন্তর্ভুক্ত থাকে। তবে, প্রতিটি শীট অন্য 31 টি আমদানি করতে পারে।

Answer 11

@ ইম্পোর্ট ব্যবহারের অনেকগুলি ভাল কারণ রয়েছে।

@ আইম্পোর্ট ব্যবহারের একটি শক্তিশালী কারণ হ'ল ক্রস ব্রাউজার ডিজাইন করা। সাধারণত আমদানিকৃত শীটগুলি অনেক পুরানো ব্রাউজার থেকে লুকানো থাকে, যা আপনাকে নেটস্কেপ 4 বা পুরানো সিরিজের মতো খুব পুরানো ব্রাউজারগুলির জন্য, ম্যাকের জন্য ইন্টারনেট এক্সপ্লোরার 5.2, অপেরা 6 এবং তারপরের এবং আইসির 3 এবং 4 পিসির জন্য নির্দিষ্ট বিন্যাস প্রয়োগ করতে দেয়।

এটি করতে, আপনার বেস সিএসএস ফাইলটিতে আপনার নিম্নলিখিতগুলি থাকতে পারে:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

আপনার আমদানি করা কাস্টম শীটে (newerbrowsers.css) কেবল নতুন ক্যাসকেডিং স্টাইল প্রয়োগ করুন:

html body {
  font-size:1em;
}

"এম" ইউনিটগুলি ব্যবহার করা "পিএক্স" ইউনিটের তুলনায় উচ্চতর কারণ এটি ব্যবহারকারী সেটিংসের উপর ভিত্তি করে ফন্ট এবং নকশা উভয়ই প্রসারিত করতে দেয়, যেখানে পুরানো ব্রাউজারগুলি পিক্সেল-ভিত্তিক (যা দৃ are় এবং ব্রাউজার ব্যবহারকারীর সেটিংসে পরিবর্তন করা যায় না) সাথে আরও ভাল করে তোলে । আমদানিকৃত শীটটি বেশিরভাগ পুরানো ব্রাউজারগুলি দেখতে পাবেন না।

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

আপনার ক্রস-ব্রাউজার ওয়েব সাইটের সামঞ্জস্যতা ইম্পোর্ট ব্যবহার করা এখন কেবলমাত্র 99.9% স্যাচুরেশনে পৌঁছে যাবে কারণ এতগুলি পুরানো ব্রাউজার আমদানি করা শিটগুলি পড়বে না। এটি আপনাকে এইচটিএমএল জন্য একটি বেসিক সাধারণ ফন্ট সেট প্রয়োগ করার গ্যারান্টি দেয় তবে আরও এজেন্টগুলি নতুন এজেন্টরা ব্যবহার করে। এটি নতুন ডেস্কটপ ব্রাউজারগুলিতে প্রয়োজনীয় সমৃদ্ধ ভিজ্যুয়াল প্রদর্শনগুলির সাথে আপস না করে পুরানো এজেন্টদের জন্য সামগ্রীটিকে অ্যাক্সেসযোগ্য হতে দেয়।

মনে রাখবেন, আধুনিক ব্রাউজারগুলি কোনও HTML সাইটে প্রথম কল করার পরে এইচটিএমএল স্ট্রাকচার এবং সিএসএসকে খুব ভাল করে ক্যাশে করে। সার্ভারে একাধিক কলগুলি এটি একবারের মধ্যে অন্তরায় ছিল না।

জাভাস্ক্রিপ্ট এপিআই এবং জেএসএন-র মেগাবাইটস এবং মেগাবাইটগুলি স্মার্ট ডিভাইসে আপলোড হয়েছে এবং পাতাগুলির মধ্যে সামঞ্জস্যপূর্ণ নয় এমন দুর্বল নকশা করা এইচটিএমএল মার্কআপ যা আজ ধীর রেন্ডারিংয়ের প্রধান চালক। আপনার গড় গুগল নিউজ পৃষ্ঠাটি কেবলমাত্র একটি ছোট্ট টেক্সট রেন্ডার করতে ECMAScript 6 মেগাবাইটের ওপরে! হাঃ হাঃ হাঃ

ছোট জাভাস্ক্রিপ্ট পদচিহ্নগুলি সহ কয়েকটি কিলোবাইট ক্যাশেড সিএসএস এবং ধারাবাহিক পরিষ্কার HTML এইচআর গতিতে কোনও ব্যবহারকারী-এজেন্টকে রেন্ডার করবে কারণ ব্রাউজারটি সামঞ্জস্যপূর্ণ ডোম মার্কআপ এবং সিএসএস উভয়ই ক্যাশে করে, যদি না আপনি জাভাস্ক্রিপ্ট সার্কাস ট্রিক্সের মাধ্যমে এটিকে পরিচালনা এবং পরিবর্তন করতে চান।

Answer 12

আমি মনে করি আপনি কীভাবে একাধিক সিএসএস স্টাইল শীট লিখছেন তার মূল কারণ এই দুটি কারণ।

1. আপনি একাধিক পত্রক লিখেন কারণ আপনার ওয়েবসাইটের বিভিন্ন পৃষ্ঠার জন্য বিভিন্ন সিএসএস সংজ্ঞা প্রয়োজন require বা কমপক্ষে তাদের সকলের জন্য অন্য একটি পৃষ্ঠাতে প্রয়োজনীয় সমস্ত সিএসএস সংজ্ঞা প্রয়োজন হয় না। তাই আপনি বিভিন্ন পৃষ্ঠায় কী কী শীট লোড হচ্ছে তা অনুকূলিত করতে এবং অনেকগুলি সিএসএস সংজ্ঞা লোড করা এড়াতে CSS ফাইলগুলি বিভক্ত করেছেন।
2. দ্বিতীয় কারণ মনে আসবে তা হ'ল আপনার সিএসএসটি এত বড় হয়ে উঠছে যেটি পরিচালনা করতে আনাড়ি হয়ে ওঠে এবং বড় সিএসএস ফাইল বজায় রাখা আরও সহজ করার জন্য আপনি সেগুলি একাধিক সিএসএস ফাইলে বিভক্ত করেছেন।

প্রথম কারণেই অতিরিক্ত <link>ট্যাগ প্রয়োগ করা হবে কারণ এটি আপনাকে বিভিন্ন পৃষ্ঠার জন্য সিএসএস ফাইলের বিভিন্ন সেট লোড করতে দেয়।

দ্বিতীয় কারণে @importবিবৃতিটি সবচেয়ে কার্যকর হিসাবে উপস্থিত হয় কারণ আপনি একাধিক সিএসএস ফাইল পান তবে লোড করা ফাইলগুলি সর্বদা একই থাকে।

লোডিং সময়ের দৃষ্টিকোণ থেকে আলাদা কিছু নেই। ব্রাউজারকে পৃথক সিএসএস ফাইলগুলি প্রয়োগ করা হয় না কেন তা পরীক্ষা করে ডাউনলোড করতে হয়।

Comments

আপনি বলছেন "লোডিং সময়ের দৃষ্টিকোণ থেকে আলাদা কিছু নেই The ব্রাউজারকে পৃথক সিএসএস ফাইলগুলি কীভাবে প্রয়োগ করা হয় তা নির্ধারণ করে ডাউনলোড করতে হবে" " যদিও এটি সঠিক নয়। ব্রাউজারটি সমান্তরালভাবে বেশ কয়েকটি <লিঙ্ক> সিএসএস ফাইল ডাউনলোড করতে পারে তবে @ ইম্পোর্ট সিএসএস ফাইলের জন্য সেগুলি ডাউনলোড করতে হবে, পার্স করতে হবে এবং তারপরে @ ইমপোর্ট ফাইলগুলি ডাউনলোড করতে হবে। এটি আপনার পৃষ্ঠার লোডের গতি কমিয়ে দেবে, বিশেষত যদি আমদানি করা সিএসএস ফাইলের নিজস্ব @ আমদানি ফাইল থাকে

— সাইবারস্কি

Answer 13

আপনি যদি এরিক মায়ারের রিসেট সিএসএস ভি 2.0 এর মতো কোনও সিএসএস রিসেট ব্যবহার করেন তবে আপনার সিএসএসে @ ইমপোর্ট ব্যবহার করুন, সুতরাং বিরোধগুলি প্রতিরোধ করে আপনার সিএসএস প্রয়োগ করার আগে এটি কাজ করে।

Answer 14

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

Answer 15

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

@import 'stylesheetB.css';

সুতরাং, আমি নকশাকে হার্ড-কোডিং করার সময় নিতরামের যেমন উল্লেখ করা হয়েছে, তেমন একটি ভাল মানসিক মানচিত্রের জন্য দরকারী বলে মনে করি। Godspeed। এবং আমি যদি ইংলিশ ব্যাকরণগত ভুলের জন্য ক্ষমা করি।

Answer 16

@ ইমপোর্ট ব্যবহার করার প্রায় কোনও কারণ নেই কারণ এটি প্রতিটি একক আমদানি করা সিএসএস ফাইল আলাদাভাবে লোড করে এবং আপনার সাইটটিকে উল্লেখযোগ্যভাবে ধীর করতে পারে। আপনি যদি সিএসএসের সাথে ডিল করার সর্বোত্তম উপায়ে আগ্রহী হন (যখন এটি পৃষ্ঠার গতিতে আসে), আপনার সমস্ত সিএসএস কোডকে এইভাবে আচরণ করা উচিত :

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

আরও বিস্তারিত তথ্য এখানে: http://www.giftofspeed.com/optimize-css-delivery/

উপরেরটি সর্বোত্তম কাজ করার কারণটি হ'ল এটি ব্রাউজারের সাথে ডিল করার জন্য কম অনুরোধ তৈরি করে এবং তা অবিলম্বে পৃথক ফাইল ডাউনলোড করার পরিবর্তে সিএসএস রেন্ডারিং শুরু করতে পারে।

Comments

"অপ্টিমাইজেশন" শব্দটির একটি অত্যন্ত সংকীর্ণ, তবে বৈধ view আপনার বিচক্ষণতার জন্য, প্রকাশনা পর্যায়ে এই ধরণের অপ্টিমাইজেশন অর্জনের জন্য একটি সরঞ্জাম ব্যবহার করুন। ততক্ষণে আপনি যা ভাবতে এবং কোড দ্রুত করতে সহায়তা করে তা করুন ।

— জেসি চিশল্ম

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

— লেগোলাস

সমস্ত সিএসএস ফাইল অনুলিপি করা এবং স্টাইলের ভিতরে পেস্ট করা বিপর্যয় .. কমপক্ষে 1 সিএসএস অন্তর্ভুক্ত করা আরও ভাল<HEAD>

— টি.টিডুয়া

এটি ব্রাউজারের ক্যাচিংকে পুরোপুরি উপেক্ষা করে

— মিশিগেল

আমি ধরে নিচ্ছি এই উত্তরটি কি রসিকতা? (অকার্যকর সাহসী প্রকার, এবং লিঙ্কযুক্ত পৃষ্ঠাটি স্টাইল ট্যাগগুলি ব্যবহার না করার জন্য বলে)

— সঞ্জয় মনোহর

Answer 17

এটি কোনও পিএইচপি বিকাশকারীকে সাহায্য করতে পারে। নীচের ফাংশনগুলি সাদা স্থান ছিনিয়ে নেবে, মন্তব্যগুলি সরিয়ে ফেলবে এবং আপনার সমস্ত সিএসএস ফাইল সংযুক্ত করবে। তারপরে <style>পৃষ্ঠা লোডের আগে এটি মাথায় একটি ট্যাগ .োকান।

নীচের ফাংশনটি মন্তব্যগুলি ছড়িয়ে দেবে এবং সিএসএস-এ উত্তীর্ণকে ছোট করে দেবে। এটি পরবর্তী ফাংশনের সাথে একত্রে তৈরি হয়।

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

আপনি আপনার দস্তাবেজের শিরোনামে এই ফাংশনটি কল করবেন।

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

concatenateCSS()আপনার ডকুমেন্টের মাথায় ফাংশনটি অন্তর্ভুক্ত করুন । তার পাথ ইন্টারনেট সঙ্গে আপনার স্টাইলশীট নাম সহ একটি বিন্যাস মধ্যে পাস: css/styles.css। .cssউপরের ক্রিয়ায় স্বয়ংক্রিয়ভাবে যুক্ত হওয়ার কারণে আপনাকে এক্সটেনশনটি যুক্ত করতে হবে না।

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>

Comments

আমি মনে করি আপনার সিএসএসের বিষয়বস্তুগুলিকে ম্যানুয়ালি 'মাইনাইফ' করা তারপরে নির্বাচিত স্টাইল শিটগুলির মধ্য থেকে লুপিং করা এবং সেগুলি প্রতিটি পৃষ্ঠায় যুক্ত করা অনেক ভাল। এছাড়াও file_get_contents()কার্ল ব্যবহার না করে যথেষ্ট মন্থর।

— কনার সিম্পসন

এটি একটি খারাপ ধারণা যা ব্রাউজারের ক্যাশে ব্যবহার হতে বাধা দেয়।

— সংস্কার করা হয়েছে