নির্দিষ্ট পৃষ্ঠায় ব্যবহৃত সিএসএস উত্তোলন


86

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

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


উত্তর:


17

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

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

http://www.sitepPoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

ডাস্ট-মি সিলেক্টরস ২.২ উপরের মন্তব্যের বিপরীতে ফায়ারফক্স ৩.6 এর সাথে সামঞ্জস্যপূর্ণ (আমি এটি কেবল ইনস্টল করেছি)।


4
সমস্ত অব্যবহৃত সামগ্রী অপসারণ করে একটি নির্দিষ্ট সিএসএস ফাইলের একটি অনুলিপি রফতান করার উপায় আছে কি?
rraallvv

4
টুইটারে এটিই একমাত্র সরঞ্জাম যা কাজ করবে এবং এখনও মিডিয়া প্রশ্নগুলিকে সম্মান করবে। এটির একটি বিরক্তিকর বাগ রয়েছে যেখানে এটি "অপরিজ্ঞাত" শব্দটি দিয়ে আউটপুট সিএসএস ফাইলটি লিটার করে তবে একটি দ্রুত অনুসন্ধান 'এন এটি সংশোধন করে। একবার টুলটি চলে গেলে প্রতিটি ফাইল শীটের জন্য "অব্যক্ত নির্বাচক" ট্যাবে "ক্লিন" বোতামটি চাপুন। এটি সিএসএস তৈরি করবে যা আপনি রফতানি করতে পারেন।
এরিক এল।

4
অ্যাড-অন পৃষ্ঠাটি আর বিদ্যমান নেই। এবং প্রথম লিঙ্কটি দ্বিতীয়টিতে পুনঃনির্দেশ করে।
মারিয়ান

56

সেরা পৃষ্ঠটি হস্ত করে যা কেবলমাত্র পৃষ্ঠায় ব্যবহৃত সিএসএস পেয়ে আপনি যা চান ঠিক তেমন করে এবং আপনাকে কেবল এটি আপনার ক্লিপবোর্ডে অনুলিপি করার অনুমতি দেয় এটি হ'ল এই ক্রোম এক্সটেনশন সিএসএস ব্যবহৃত Used

সুন্দর চিত্র উদাহরণ

এখানে চিত্র বর্ণনা লিখুন


দুর্দান্ত সরঞ্জাম ... তবে এটি মিডিয়া প্রশ্নগুলি উপেক্ষা করে বলে মনে হচ্ছে। :(
এরিক এল।

8
আমি সমর্থিত মিডিয়া ক্যোয়ারিতে এক্সটেনশনটি আপডেট করেছি। এছাড়াও, ব্যবহৃত কীফ্রেমগুলি / ফন্ট-মুখের সংজ্ঞা, এমনকি কিছু আইই হ্যাক এখন সমর্থিত।
পেটিজয়

4
সমর্থন মিডিয়া প্রশ্নের এখন।
এথিয়াওস

4
এটা অসাধারণ. এমনকি আপনি ডিওমে একটি উপাদান নির্বাচন করতে পারেন এবং এটি নির্দিষ্ট ধারকটির জন্য ব্যবহৃত সিএসএস সরবরাহ করবে।
webnoob

4
আহ আপনারা খুব শান্ত যখন আপনি আপনার সমস্যার সঠিক সঠিক সরঞ্জাম খুঁজে পান :)
সিনাজা

10

এই প্রতিশ্রুতিবদ্ধ চেহারা:


4
আমি মনে করি সিএসএস ব্যবহার সবচেয়ে ভাল কাজ করে। বিশেষত আপনার যদি এইচটিটিপিএস থাকে।
বেন_ কোডিং

10

(ফায়ারফক্সের জন্য নয় তবে সম্ভবত এটি কাউকে সহায়তা করে)

আপনি যদি ক্রোমে কাজ করছেন তবে আপনি এই এক্সটেনশনটি ব্যবহার করতে পারেন:

সিএসএস সরান এবং একত্রিত করুন ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )

  • আপনাকে সমস্ত ব্যবহৃত শৈলীর সাথে সম্মিলিত সিএসএস ডাউনলোড করতে দেয়
  • পপআপ উইন্ডোতে অব্যবহৃত শৈলী প্রদর্শন করে
  • উত্পন্ন শৈলী অন্তর্ভুক্ত

দুর্দান্ত সরঞ্জাম তবে এটি মিডিয়া ক্যোয়ারী সিএসএস উপেক্ষা করে। এটি একত্রিত হওয়ার পরে, আমার সাইট আর প্রতিক্রিয়াশীল নয়।
জোনাস টি

"সিএসএস অপসারণ এবং একত্রিত করুন" পুরানো বলে মনে হচ্ছে, ক্রোম 67-এ কাজ করছে না
অন্য

4

আমি আনসিএসএস-অনলাইন জুড়ে এসেছি - আনঅফিসিয়াল সার্ভার, পরীক্ষার জন্য বা এক-অফ ব্যবহারের জন্য খুব সুবিধাজনক! আমি মনে করি এটি আমার সেরা সরঞ্জাম come

ইউএনএসএসএস এমন একটি সরঞ্জাম যা আপনার স্টাইলশীট থেকে অব্যবহৃত সিএসএস সরিয়ে দেয়। এটি একাধিক ফাইল জুড়ে কাজ করে এবং জাভাস্ক্রিপ্ট-ইনজেকশন সিএসএস সমর্থন করে। এটি এইভাবে ব্যবহার করা যেতে পারে:

  • সরবরাহিত বাক্সগুলিতে আপনার HTML এবং CSS অনুলিপি করুন এবং আটকান
  • বোতাম ক্লিক করুন
  • যাদু হওয়ার জন্য অপেক্ষা করুন
  • অব্যবহৃত সিএসএস চলে গেছে, বিশ্রাম নিন এবং এটি ব্যবহার করুন!

এই সরঞ্জামটি ব্যবহারের জন্য অন্যান্য উন্নত উপায়গুলির জন্য আপনি তাদের গিথব পৃষ্ঠাটি পরীক্ষা করতে পারেন


3

SnappySnippet

ক্রোমের স্নেপ্পস্নিপেট নামের ক্রোমের একটি মুক্ত ওপেন সোর্স রয়েছে যা আমি ক্রোমে ইতিমধ্যে উপলব্ধ বিকাশকারী সরঞ্জামগুলিকে প্রসারিত অন্যান্য তুলনায় অনেক ভাল পেয়েছি। আপনি পৃষ্ঠার কেবলমাত্র একটি অংশই নিষ্ক্রিয় করতে পারেন সমস্ত প্রাসঙ্গিক সিএসএস করবে। তাকান এই Stackoverflow পোস্ট


4
হ্যাঁ তবে এটি কিছু জেনেরিক আইডিতে শ্রেণীর নাম পরিবর্তন করে যা খুব বেশি সহায়ক নয়
শিশির অরোরা

3

জাভাস্ক্রিপ্ট ব্যবহার করে আমার সমাধানটি এখানে দেওয়া হয়েছে:

    var css = [];
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i];
        var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
        if (rules)
        {
            css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
            for (var j=0; j<rules.length; j++)
            {
                var rule = rules[j];
                if ('cssText' in rule)
                    css.push(rule.cssText);
                else
                    css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
            }
        }
    }
    var cssInline = css.join('\n')+'\n';

শেষ পর্যন্ত, cssInlineপৃষ্ঠার সমস্ত স্টিলশিট এবং তাদের সামগ্রীর একটি পাঠ্য তালিকা।

উদাহরণ:

    /* Stylesheet : http://example.com/cache/css/javascript.css */
    .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
    .javascript { color: rgb(172, 172, 172); }
    .javascript .imp { font-weight: bold; color: red; }

    /* Stylesheet : http://example.com/i/main_master.css */
    html { }
    body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
    a { color: rgb(204, 0, 51); text-decoration: none; }
    a:hover { color: rgb(153, 153, 153); text-decoration: none; }
    .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
    #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
    #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
    #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
    #header a { color: rgb(255, 255, 255); }
    #menu_2 { height: 290px; }

    /* Stylesheet : [inline styles] */
    .hidden { display: none; }

এটি যদি আমার নিজের পৃষ্ঠায় কোনও বাহ্যিক সাইট থেকে সিএসএস প্রয়োগ করতে ব্যবহার করা যায় তবে দুর্দান্ত হবে। আমি কীভাবে এটি করতে জানি না ...
জন কেন

2

2

পিউরিফাইসিএসএস পরীক্ষা করুন এবং এটি যারা সি এল এল বা গুল্প / গ্রান্ট / ওয়েবপ্যাক পরিচালনা করতে পারেন তাদের জন্য

ক্লাসগুলি জাভাস্ক্রিপ্ট দ্বারা ইনজেকশনের পরেও আপনি একক পৃষ্ঠা বা একাধিক পৃষ্ঠা বা পুরো প্রকল্প থেকে অব্যবহৃত স্টাইলটি সরাতে পারেন।

আপনি যদি গুগল করতে পারেন তবে সেখানে প্রচুর সংস্থান আছে যেখান থেকে আপনি প্যুরিফাইসিএসএস সম্পর্কে শিখতে পারেন।


1

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


1

আপনি যদি একক পৃষ্ঠাগুলি নিয়ে কাজ করে থাকেন তবে আপনি কেবলমাত্র ওয়েবপৃষ্ঠা দ্বারা ব্যবহৃত সিএসএস দ্রুত তাড়াতাড়ি করতে আমার বুকমার্কলেটটি ব্যবহার করতে পারেন:

  1. এখানে যান (যদি এই লিঙ্কটি নষ্ট হয়ে যায় তবে আপনি এটি পেস্টবিন থেকেও পেতে পারেন )।
  2. আপনার বুকমার্ক টুলবারে "ডাউনলোড বুকমার্কলেট" এর নীচে বড় বোতামটি টানুন।

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

এই সমাধানটির সাথে একটি ভাল বিষয় হ'ল এটি প্রতিক্রিয়াশীল পৃষ্ঠাগুলি সমর্থন করে যেহেতু মিডিয়া অনুসন্ধানগুলিও নিষ্কাশিত হয়। বোনাস হিসাবে, মিডিয়া অনুসন্ধানগুলি ভিউপোর্টের আকারের নির্দিষ্টতা অনুসারে বাছাই করা হয় (যেমন, পরে@media (max-width: 767px) আসবে ), @media (max-width: 1023px)

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

দ্রষ্টব্য: এই বুকমার্কলেটটি Chrome এ স্থানীয় ফাইলগুলির সাথে কাজ --allow-file-access-from-filesকরতে, Chrome শর্টকাট টার্গেটে যুক্ত করুন। উদাহরণ:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

1

এই সরঞ্জামটি ব্যবহার করে দেখুন, যা কেবল একটি সাধারণ জেএস স্ক্রিপ্ট https://github.com/shashwatsahai/CSSExtractor/ এই সরঞ্জামটি সক্রিয় শৈলীর জন্য সমস্ত উত্স তালিকাভুক্ত একটি নির্দিষ্ট পৃষ্ঠা থেকে সিএসএস পেতে সহায়তা করে এবং উত্স হিসাবে একটি জেএসওনে সংরক্ষণ করে কী এবং মান হিসাবে নিয়ম। এটি href লিঙ্কগুলি থেকে সমস্ত সিএসএস লোড করে এবং সেগুলি থেকে প্রয়োগ করা সমস্ত স্টাইলকে বলে tells আপনি কোনও নাম সহ কোনও জেএসওএন ফাইলে আউটপুট সংরক্ষণ করতে পারেন।


0

হুম .. আমি সিএসএস ফাইলের সার্ভারসাইড পার্সিং ব্যবহার করে বিভিন্ন সিএসএস নির্বাচককে বের করে কিছু জোর জোর নিক্ষেপ করব, তারপরে এগুলির প্রত্যেককে ব্রাউজারের মধ্যে একটি jQuery নির্বাচক হিসাবে চালিত করব। খুব মার্জিত না, তবে কাজ করা উচিত?


তবে এটি করার কোনও বিদ্যমান সরঞ্জাম আছে কি?
রজার হলিবার্টন

0

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

তবে, প্রশ্নটি এখনও অত্যন্ত প্রাসঙ্গিক কারণ গুগল এখন পৃষ্ঠার গতিটিকে তার অগ্রাধিকার মেট্রিকগুলির একটি হিসাবে ব্যবহার করে।

তালিকাভুক্ত সমস্ত লিঙ্কগুলিতে একগুচ্ছ গবেষণা করার পরে, আমি purgecss.com খুঁজে পেয়েছি । অ্যাঙ্গুলার, রিএ্যাক্ট, ভ্যু ইত্যাদি ব্যবহার করে আধুনিক ওয়েব অ্যাপস / এসপিএগুলিতে অব্যবহৃত সিএসএস পরিষ্কার করার জন্য এটি সেরা বিকল্প বলে মনে হয়। সেখানে পোস্টসিএসএস, ওয়েবপ্যাক, গ্রান্ট এবং গুল্পের সাথে সংহতকরণও তৈরি করা আছে।

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


-1

আপনি কোনও পৃষ্ঠায় সিএসএস ব্যবহার করতে http://getcssusedinapage.com ব্যবহার করতে পারেন । এটি নিখরচায়, দ্রুত এবং আপনাকে ন্যূনতম ও অনুকূলিত সিএসএস কোডের সাথে অনেকগুলি বিবরণ ফিরিয়ে দেয় যা আপনি কেবলমাত্র আপনার ওয়েবসাইটটিতে + পেস্ট অনুলিপি করতে পারবেন

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