রিয়েল-টাইম প্রাকদর্শন এবং নির্বাচক স্থানীয়করণ সহ সিএসএস সম্পাদক


9

শিরোনামটি আমি যা খুঁজছি সে সম্পর্কে সমস্ত কিছু বলে। মূলত এটি এমন একটি সফ্টওয়্যার হওয়া উচিত যা কোনও ওয়েবসাইটের সমস্ত স্টাইল সংগ্রহ করে যাতে আমি সেগুলি সম্পাদনা করতে এবং সেভ করতে পারি।

দয়া করে প্রশ্নটি মনোযোগ সহকারে পড়ুন, কারণ আমি চাই সমস্ত উল্লিখিত শর্ত পূরণ করা উচিত।

সম্পাদনা: আমি এখানে আরও পরিষ্কার হতে চাই বা বরং আমার পছন্দসই কর্মপ্রবাহ বর্ণনা করতে চাই। শুরু করার পরিস্থিতিটি হ'ল আপনার স্থানীয় মেশিনে ওয়েবসাইটের উত্স রয়েছে।
এখন আমি আমার সম্পাদক / আইডিই / যে কোনও (ডাব্লুওয়াইএসআইডাব্লুআইজি!) সরল উত্স (এইচটিএমএল / সিএসএস) খুলতে চাই। এবং এর ঠিক পাশেই বা ভিন্ন উইন্ডোতে (অন্য ট্যাবে নয়) আমি একটি লাইভ পূর্বরূপ চাই, উত্সটি সম্পাদনা করার সাথে সাথে আমি এটি দেখতে চাই। পূর্বরূপটি স্বয়ংক্রিয়ভাবে আপডেট হওয়া উচিত (অথবা আমি ফাইলটি সংরক্ষণ করি যা মূলত একই রকম হবে কারণ CTRL + S এক ধরনের প্রতিচ্ছবি: পি)।
অতিরিক্তভাবে এটির একজন পরিদর্শক থাকা উচিত যা ফায়ারব্যাগ বা ক্রোমের (e | ium) এর মতো কাজ করে। আমি যখন insp পরিদর্শকের কোনও সিএসএস নির্বাচনকারীকে ক্লিক করি, তখন কার্সারটিকে সংশ্লিষ্ট উত্স ফাইলে ডানদিকে লাফ দেওয়া উচিত।

অন্য সম্পাদনা: এটি https://stackoverflow.com/q/4680109/220652 পাওয়া গেছে । প্রায় একই সমস্যা।


2
ফায়ারব্যাগ এবং ওয়েব বিকাশকারী সরঞ্জামদণ্ড উভয়ই সিএসএস সম্পাদনা করতে পারে, পরেরটি এটি সংরক্ষণও করতে পারে।
লেকেনস্টেইন

1
@ লেকেনস্টেইন: হ্যাঁ তবে ফায়ারব্যাগ সংরক্ষণ করতে পারে না এবং ওয়েব বিকাশকারী নির্বাচকদের সনাক্ত করতে পারে না। সুতরাং তারা আমি যা খুঁজছি তা নয়। দুঃখিত।
ডি অঞ্জো

উত্তর:


12

কয়েকটি অপশন আছে।

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

এখানে আমি ক্রোমের বিকাশকারী সরঞ্জামে একটি সংজ্ঞা সম্পাদনা করেছি

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

আমি ফাইলের নাম এবং লাইন নম্বর অনুসরণ করতে পারি (পরিবর্তনগুলি অনুলিপি করার পরে) এবং কেবল এডিটরে এগুলি পেস্ট করতে পারি

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

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


আপনি ঠিক কীভাবে সিএসএস অনুলিপি করেন? এবং আপনি কি ফাইল প্রতি এটি করতে পারেন? ওয়েবপুট্টি স্থানীয় ওয়েবসাইটগুলি পরিচালনা করতে সক্ষম বলে মনে হচ্ছে না তবে ইঙ্গিতটির জন্য ধন্যবাদ।
dAnjou

1
@jAnjou আমি কিভাবে ওয়ার্কফ্লো যেতে হবে তা দেখানোর জন্য কয়েকটি স্ক্রিনশট দেওয়ার চেষ্টা করেছি।
মার্কো সেপ্পি

আহ, ঠিক আছে. সুতরাং এই কর্মপ্রবাহটি প্রায় স্টাইলবটের মতোই। সবচেয়ে বড় পার্থক্য: স্টাইলবট সিএসএস সংরক্ষণ করে যাতে আপনি পৃষ্ঠাটি পুনরায় লোড করতে বা সেই ওয়েবসাইটে অন্য পৃষ্ঠাগুলিতে যেতে পারেন। যাইহোক, এটি একটি উপভোগ।
dAnjou

5

এই প্রশ্নটি ইতিমধ্যে আলোচিত হয়েছে বলে মনে হয় তবে আপনি আরও নির্দিষ্ট করে কোনও সিএসএস সম্পাদক সম্পর্কে কথা বলছেন। এবং আমি নিশ্চিত যে সে কারণেই তারা আপনার প্রশ্নটিকে নকল হিসাবে চিহ্নিত করে নি।

তবে আমি আপনাকে যে পরামর্শ দিতে পারি তা হ'ল আমি অন্যান্য প্রশ্নের উত্তরে পোস্ট করা বেশ কয়েকটি সরঞ্জামের ব্যবহার, যেমন: উবুন্টুতে ড্রিমইভার বিকল্প? , এবং এমনকি যখন আমি বাজি ধরতে পারি যে আপনি এটি ইতিমধ্যে দেখেছেন, আমি আপনার সুবিধার জন্য এটি এখানে প্রতিলিপি করছি:

আপনার প্রশ্নটি কিছুটা অস্পষ্ট বলে মনে হচ্ছে।

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

অফিসিয়াল ওয়েব থেকে একটি স্ক্রিনশট এটি কার্যকর হয় তা দেখার জন্য এখানে:

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

পরবর্তী স্ক্রিনশটগুলি পরবর্তী লিঙ্কটিতে ক্লিক করে পৌঁছানো যাবে: http://www.w3.org/Amaya/screenshots/Overview.html

আপনি এটি কিছুটা অস্থির দেখতে পাচ্ছেন বা কমপক্ষে এটি আমার পক্ষে ছিল তবে এটি আপনার প্রয়োজনের সাথেও খাপ খায়।

ডাব্লুওয়াইএসআইডাব্লুওয়াইজি সম্পাদকদের সাথে খেলার পরে আমি ব্লু ফিশের সাথে সরাসরি এনকোডিংকে পছন্দ করেছি তবে এটি কোনও WYSIWYG সম্পাদক নয়।

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

আপনি আমায়াকে সুযোগ দিলে আপনি কী করেছিলেন তা দয়া করে আমাদের জানান।

শুভকামনা!

সম্পাদনা == আমায়া ইনস্টল করার পরে, আমি এটি স্থিতিশীল থেকে এখনও অনেক দূরে দেখতে পেয়েছি তবে অন্য অ্যাপ্লিকেশনগুলির তুলনায় এটির আরও ভাল বৈশিষ্ট্য রয়েছে বলে মনে হয়, যদি আপনি মনে করেন যে অন্যান্য সফ্টওয়্যারটি সাধারণ পাঠ্য সম্পাদক এবং আমায়া একটি WYSIWYG সম্পাদক হিসাবে রয়েছে editor

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

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

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

কেউ আসবেন এবং একটি ভাল বিকল্প ছেড়ে যাবেন এই আশায় আমি আপনার প্রশ্নটি ঘনিষ্ঠভাবে অনুসরণ করব।

শুভকামনা!

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

আপনার সুবিধার জন্য এখানে স্ক্রিনশট স্থাপন করা হয়েছে:

পূর্বরূপ স্ক্রিন: এখানে চিত্র বর্ণনা লিখুন

কোড স্ক্রিন: এখানে চিত্র বর্ণনা লিখুন

এই সরঞ্জামটিতে প্রচুর দরকারী সরঞ্জাম অন্তর্ভুক্ত রয়েছে তবে কয়েকটি অ্যাড-অন বা প্লাগইন অ-মুক্ত (অর্থ প্রদান করা) হতে পারে। যা এতে আকর্ষণ হ্রাস করে।

Aptana স্টুডিও 3 , যা আমি এই উত্তর reccomend: ড্রিমউইভার মত বেসিক ওয়েব ডেভেলপমেন্ট আইডিই / সম্পাদক? আমার জন্য-প্রোগ্রামিংয়ের সেরা সরঞ্জাম, যেহেতু আমি আমার ডুয়াল ভিউ বর্ধিত ডেস্কটপে কোনও ওয়েব ব্রাউজার ব্যবহার করে পূর্বরূপ দেখতে পারি। যা আপনার ক্ষেত্রে নাও হতে পারে।

এটাই আমি পরামর্শ দিতে পারি। এটি যদি আপনার প্রয়োজনের সাথে খাপ খায় না এবং ...

শুভকামনা!


5

ঠিক আছে, শুনুন! গ্যানি হ'ল দুর্দান্ত! এটিতে একটি প্লাগইন রয়েছে যা ব্রাউজারের পূর্বরূপ যুক্ত করে। আপনি এটিকে সাইডবারে, "বোতলম্বার" বা একটি অতিরিক্ত উইন্ডোতে রাখতে পারেন। এবং এখন দুটি অতিরিক্ত বোনাস খারাপ গাধা ঘাতক বৈশিষ্ট্যগুলি। 1. এই ব্রাউজার ওয়েবকিট ব্যবহার করে। তার মানে, এটিতে এই দুর্দান্ত পরিদর্শক রয়েছে! ২. আপনি যখন কোনও খোলা নথি সংরক্ষণ করেন তখন ব্রাউজারটি আবার লোড হয়।

এছাড়াও এটিতে আরও অনেক দুর্দান্ত বৈশিষ্ট্য রয়েছে তবে আপনার নিজেরাই এটি চেষ্টা করা উচিত। আমি একজন মাত্র প্রেমে পড়েছি। এখানে আপনার একটি স্ক্রিনশট রয়েছে:

Geany


আমি কেবল এটিই খুশি যে এটি একটি নতুন "ট্যাব" এ ব্রাউজার উইন্ডোটিকে অনুমতি দিয়েছে। এটি নন-সিএসএস পরীক্ষার উপায়কে আরও ভাল করে তুলবে।
নিমো

আমি আপনাকে বুঝতে পেরেছি কিনা তা সম্পর্কে আমি নিশ্চিত নই, তবে প্রায় প্রতিটি আইডিইতে আপনার অন্য একটি ট্যাবে ব্রাউজারের পূর্বরূপ থাকতে পারে। তবে তা হ'ল, যা আমি চাইনি।
dAnjou

আমার প্রশ্ন জিজ্ঞাসা করুন
নিমো

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

4

দুঃখিত লোকেরা, তবে আমি আমার নিজের প্রশ্নের উত্তর দেব। আমি সবে স্টাইলবট পেয়েছি । এটি আমার প্রায় সব শর্ত পূরণ করে। এটির কোনও স্বয়ংক্রিয় সমাপ্তি নেই তবে আমি এটি নিয়ে বেঁচে থাকতে পারি।

এখানে একটি স্ক্রিন শট হয়. সাইডবারটি স্টাইলবট Style আপনার একটি প্রাথমিক সম্পাদনা মোড রয়েছে যেখানে আপনি কিছু সাধারণ বৈশিষ্ট্য দ্রুত সম্পাদনা করতে পারবেন, একটি উন্নত মোড যেখানে আপনি নির্বাচিত উপাদানটির জন্য প্লেইন সিএসএস সম্পাদনা করতে পারবেন এবং "সিএসএস সম্পাদনা করুন" এর সাহায্যে আপনি পৃষ্ঠার জন্য পুরো সিএসএস সম্পাদনা করতে পারবেন।

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


2

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

আপনার পরিবর্তনগুলির কোনও ডিফ বা স্ন্যাপশট সংরক্ষণ করতে "পরিবর্তনগুলি" ট্যাবে সিএসএস পরিবর্তন করতে ডান ক্লিক করুন।

ফায়ারডিফ স্ক্রিনশট

CssUpdater এছাড়াও আছে , যদিও আমি এটি ব্যবহার করি নি।

"নির্বাচক স্থানীয়করণ" হিসাবে, আপনি কী বোঝাতে চাইছেন তা সম্পর্কে আমি নিশ্চিতভাবে নিশ্চিত নই তবে সেখানে সিলেক্টব্যাগ রয়েছে , যা আপনি এখানে ডাউনলোড করতে পারেন ।


ফ্রেডিফ এখানে নাটি এবং এফএক্স 6.0.2 এ কাজ করবে বলে মনে হচ্ছে না। আমি এখানে এবং সেখানে কিছু পরিবর্তন করেছি তবে "পরিবর্তনগুলি" ট্যাবে কোনও পরিবর্তন নেই। আমি নিশ্চিত যে cssUpdater আমি যা খুঁজছি তা হবে তবে এটি লিনাক্সের জন্য উপলভ্য নয়। "নির্বাচক অবস্থান" দ্বারা আমি সিএসএস নির্বাচক বলতে চাইছি। আমি যখন ওয়েবসাইটের কোথাও ডান ক্লিক করেছি এবং "পরিদর্শন উপাদানটি" ​​ক্লিক করি, ফায়ারবগ বা ক্রোম (ই | আইউম) পরিদর্শক আমাকে সংশ্লিষ্ট উপাদান এবং এর সিএসএস দেখায়।
dAnjou

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

ঠিক আছে, এখন ফরেডিফ হঠাৎ করে কাজ করে তবে এটি কিছুটা অগোছালো এবং এর সাথে কর্মপ্রবাহটি আসলে খুব সুন্দর নয়।
dAnjou

0

অপ্টানা স্টুডিও দুর্দান্ত আইডিই তবে আমি যদি ভুল না হয় তবে এটির রিয়েল-টাইম প্রাকদর্শন নেই। যাইহোক, যদি আপনার আগ্রহী হয়: http://www.aptana.com/products/studio3

পিএস: এর পূর্বরূপের জন্য একটি হট-কী সেট রয়েছে তাই এটি কোনও চুক্তির মধ্যে এত বড় নয়।


আমি দেখতে পাচ্ছি না যে অপ্টানা কীভাবে আমার কোনও শর্ত পূরণ করে (?)।
dAnjou

0

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


আমি বুঝতে পারছি না। এটি নির্বাচকদের সনাক্ত করতে পারে?
dAnjou

0

মাত্র কয়েক সপ্তাহ আগে এই মাঠে নতুন খেলোয়াড় উত্থাপিত হয়েছে। আমি অ্যাডোব এর ওপেন সোর্স কোড এডিটর বন্ধনী সম্পর্কে টকং করছি। আপনার প্রয়োজনীয় সমস্ত তথ্য এখানে: https://github.com/adobe/bracket/wiki/Linux- ভার্সন

স্প্রিং 30 সংস্করণটি বেশ কয়েকদিন আগে প্রকাশিত হয়েছিল :) শুভকামনা!

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