Podczas tworzenia stron WWW, proces edycji CSS, wygl膮da cz臋sto
tak:
·
Pr贸bujemy ostylowa膰 element w DevToolsach
·
Gdy osi膮gamy oczekiwany efekt, wpisujemy kod
ponownie do edytora
·
Od艣wie偶amy przegl膮dark臋 i ewentualnie wracamy do
pierwszego punktu
Google Chrome, oferuje 艣wietn膮
opcj臋, kt贸ra znacznie upro艣ci spos贸b, w jaki tworzysz swoje style. Sztuczki,
kt贸re opisuj臋 ni偶ej, pozna艂em dzi臋ki jednemu z tutoriali Brada Traversy.
Edycja CSS w Chrome
Aby zadzia艂a si臋 magia, wejd藕 w
przegl膮darce w sekcj臋 Sources i wybierz w niej, arkusz styl贸w, kt贸ry za艂膮czy艂e艣
do dokumentu HTML. Mo偶esz tam edytowa膰 kod CSS i na bie偶膮co podgl膮da膰 zmiany.
To bardzo du偶a korzy艣膰 na przyk艂ad wtedy, gdy strona dzia艂a wolno, lub wymaga
skomplikowania przed zobaczeniem efekt贸w. Zamiast denerwowa膰 si臋 na ka偶de
prze艂adowywanie strony i problemy z cache, mo偶esz sprawnie wykonywa膰 swoje
zadania.
Klikaj膮c PPM w oknie, w kt贸rym
piszesz style, mo偶esz zapisa膰 arkusz na dysku, w celu p贸藕niejszego dogrania go
do CSS strony. Przyk艂adowo – mo偶esz tworzy膰 style w przegl膮darce i dopiero przed
skomitowaniem kodu, wrzuci膰 je w edytor tekstu i zapisa膰.
Mo偶esz te偶 zobaczy膰, jakie
zmiany zrobi艂e艣 w kodzie lokalnie, klikaj膮c w edytor PPM i wybieraj膮c Local Modifications – pojawi si臋
okienko pokazuj膮ce r贸偶nice. Kilka miesi臋cy temu pisa艂em o tym, jakie zalety ma
wtyczka Stylish i teraz musz臋 to odwo艂a膰 – edytowanie styl贸w w Chrome, dzia艂a
znacznie lepiej.
Chrome jako edytor
Je艣li strona jest zapisana na
dysku i nie wymaga takich zabieg贸w, jak na przyk艂ad kompilacja SASS, nic nie
stoi na przeszkodzie, 偶eby tworzy膰 j膮 bezpo艣rednio w Chrome.
W okienku po lewej panelu Sources, kliknij PPM i wybierz opcj臋 Add folder to workspace. Po zezwoleniu
na edycj臋, mo偶esz u偶ywa膰 Chrome jako wygodnego edytora. Zmiany s膮 zapisywane
bie偶膮co na dysku. Mo偶esz edytowa膰 tak偶e HTML. Co najlepsze, nasze zmiany nie
znikaj膮 po od艣wie偶eniu strony.
Edycja snippet贸w
Snippety to pliki zawieraj膮ce
JS, kt贸re mo偶esz dodawa膰 do istniej膮cego kodu na stronie. Znajdziesz je w
trzeciej zak艂adce po lewej stronie w panelu Sources.
W komentarzu napisz, co s膮dzisz
o tej metodzie pracy.
Brak komentarzy:
Prze艣lij komentarz