4 proste techniki szybkiego debugowania i naprawiania kodu CSS w prawie każdej przeglądarce

4 proste techniki szybkiego debugowania i naprawiania kodu CSS w prawie każdej przeglądarce

zaprojektowałeś idealny układ dla swojej nowej i nadchodzącej strony internetowej. Ale teraz konwersja całego tego pięknego pliku warstwowego Photoshop PSD w pikselowy kod jest trudną częścią. Nie jest to trudne, ponieważ nie wiesz, jak kodować, ale trudniejsze, ponieważ różne przeglądarki renderują Twój kod inaczej, nawet jeśli używasz całkowicie poprawnego kodu CSS, aby wyświetlić ten niesamowity semantyczny kod HTML5, który napisałeś. Jest to jeszcze bardziej frustrujące, gdy naprawianie błędu w jednej przeglądarce staje się nowym błędem w innej przeglądarce. Nawet jeśli nie jest to wyzwanie, wyobraź sobie, że jesteś przypisany do naprawy cudzego kodu, który jest wszędzie. Często ten ostatni przypadek jest Tym, który sprawia, że ciągniesz za włosy i mówisz liczne WTFs, zanim całkowicie zrozumiesz, co dzieje się w ich kodzie, ponieważ prawdopodobnie znasz cały swój arkusz stylów na pamięć, a ten nowy kod nie jest bliski jakiejkolwiek konwencji kodowania. Jednak moment zejścia i zabrudzenia z debugowaniem kodu CSS jest znacznie prostszy i mniej frustrujący niż wcześniej, dzięki tym bardzo prostym narzędziom i technikom.

1) Narzędzie Inspect Element

Inspect element zdecydowanie jest najlepszym narzędziem do rozpoczęcia debugowania czegokolwiek CSS. Jeśli tworzysz strony internetowe, potrzebujesz odpowiedniego zestawu narzędzi do tworzenia stron internetowych. Na szczęście Inspect Element jest teraz zintegrowany natywnie ze wszystkimi nowoczesnymi przeglądarkami jako część ich narzędzi programistycznych. To narzędzie umożliwia wybranie określonego elementu na stronie, który chcesz naprawić, i natychmiastowe sprawdzenie, jakie reguły CSS są zastosowane do tego elementu, które powodują, że wybrany element jest wyświetlany w ten sposób. Wystarczy kliknąć prawym przyciskiem myszy i wybrać „Inspect Element” z menu kontekstowego.

teraz masz pełny wizualny dostęp do wszystkich reguł, które są obliczane dla tego elementu. Jeśli nie wybrałeś WŁAŚCIWEGO elementu, możesz po prostu kliknąć na źródło i wskazać dokładny element, który chcesz zdiagnozować. Jak widać na powyższym zrzucie ekranu, teraz możesz dostosować swoje reguły CSS. Za pomocą pola wyboru po lewej stronie każdej właściwości CSS można przełączyć tę właściwość, a nawet kliknąć właściwość I zmienić jej wartość, a nawet nacisnąć klawisz enter i dodać nowe reguły dla elementu. Nawet najbardziej zdumiewające jest to, jak łatwo można debugować stan najechania na element, po prostu otwierając rozwijane menu obok wybranego elementu i wybierając :stan najechania. Jak widać w prawym panelu, to niesamowite narzędzie pokazuje nawet plik arkusza stylów i numer linii reguły CSS, która jest wykonywana na tej stronie. Co więcej, bardziej zrozumiałe jest zrozumienie, dlaczego nasz element ma 10px górną i dolną wyściółkę zamiast 5px, ponieważ reguła na linii 1026 stylu.css naszego media query CSS nadpisuje starą regułę w linii 916 tego samego pliku. Można nawet zobaczyć model pudełkowy wybranego elementu z jego aktualnymi wymiarami bez użycia linijki lub narzędzia pomiarowego innej firmy. Posiadanie tego bogactwa informacji sprawia, że nasze zadanie debugowania jest znacznie łatwiejsze. Załóżmy, że pole formularza e-mail arkusza stylów nie jest podobne do innych elementów wejściowych i zastanawiasz się, jak możesz to rozwiązać. Sprawdzasz ten element i dowiadujesz się, że ponieważ używasz nowych typów pól wejściowych HTML5, Twój projektant motywów nie zawiera żadnych reguł CSS dla input, więc dodajesz ten selektor do arkusza stylów.

input,input{ border: 1px solid #ccc;}

Google Chrome ma również podobne narzędzia programistyczne, które umożliwiają te same funkcje. Jest nawet możliwe, aby zmienić tryb debugowania do rozdzielczości ekranu urządzenia, które chcesz przetestować swój układ i dowiedzieć się, jak CSS media queries zachowuje się w tych warunkach.

te narzędzia programistyczne mają bardzo potężne możliwości nawet poza rozwojem CSS, takie jak inspekcja DOM, Profilowanie JavaScript, konsola JavaScript, narzędzia do monitorowania zasobów i cały inny zestaw funkcji, które wymagają własnej sekcji samouczka poza tym artykułem. Jak widać na powyższym obrazku, w narzędziach programistycznych Chrome możliwe jest nawet emulowanie innego agenta użytkownika przeglądarki, a nawet emulowanie zdarzeń dotykowych, takich jak przesuwanie. Dzięki tym narzędziom nie musisz nawet aktywnie debugować CSS w przeglądarce mobilnej smartfona, przynajmniej do pewnego stopnia.

które narzędzia programistyczne przeglądarki są najlepsze, to pytania, które dowiesz się eksperymentując. Na koniec dnia wszystko zależy od tego, co próbujesz osiągnąć i czy ten zestaw narzędzi pozwala Ci dotrzeć do ostatecznego celu. Osobiście używam tych narzędzi na swoją korzyść. Każdy ma coś, co lubię i uważam za pomocne, gdy chcę debugować mój kod. Na przykład uważam, że mała kwadratowa reprezentacja kolorów sześciokątnych obok właściwości kolorów CSS jest w jakiś sposób przydatna, mimo że mogę przetwarzać kolor RGB w mojej głowie i uzyskać przybliżoną wizualizację podniebienia kolorów, te małe różnice sprawiają, że zmieniam się między tymi narzędziami programistycznymi.

Firebug

Firebug był jednym z pierwszych narzędzi, które zapewniały funkcję inspektora. Jest to jedno z najpopularniejszych narzędzi do tworzenia stron internetowych, z prawie 3 milionami przeciętnych użytkowników dziennie. W chwili pisania tego tekstu narzędzia do debugowania CSS Firefoksa są wystarczająco wystarczające, aby nie używać Firebug, jednak do debugowania JavaScript w Firefoksie nadal używam Firebug.

boisz się IE7? „Don’ t be anymore”

możesz być zaskoczony, ale Internet Explorer ma nawet funkcję Inspect Element (Ctrl+B) w swoich narzędziach programistycznych (F12). Chociaż nie jest tak przyjazny, jak inne narzędzia programistyczne przeglądarki, nadal Ta funkcja wbudowana w Internet Explorer 9 jest bardzo pomocna w testowaniu układów w trybie emulowanym IE7 i IE8. W czasach, gdy żadne z tych narzędzi programistycznych nie było dostępne do debugowania starych przeglądarek IE, ta druga technika zwykle była bardzo przydatna.

2) Debuguj w stylu

chociaż element Inspect jest dobry, czasami nie masz dostępu do tego narzędzia, na przykład przeglądarek mobilnych, lub chcesz dostosować stylowanie kilku elementów na stronie, a nie tylko konkretnego. Uwielbiam znać granice elementu, który stylizuję, więc wiem, czy są jakieś przepełnienia, problemy z pływaniem itp…. z tego powodu dodaję jasny i zauważalny kolor tła do aktywnego elementu, który stylizuję, i usuwam kolor tła po zakończeniu stylizacji. Czasami idę tam iz powrotem dostosowując te elementy, więc po prostu przenoszę kod debugowania na koniec mojego arkusza stylów i komentuję go i odkomentowuję, gdy będę go potrzebował ponownie. W ten sposób mogę szybko przełączyć tryb debugowania i zobaczyć, jak każdy element jest umieszczony na ekranie.

co skutkuje …

w tym przykładzie właśnie dodałem kod debugowania do głównych elementów bloku struktury na mojej stronie. Teraz mogę powiedzieć, gdzie zaczyna się każdy post i ile jest luki między każdym postem lub elementem widżetu na moim pasku bocznym, a jeśli chcę dodać lukę między paskiem bocznym a główną treścią, mogę wizualnie zobaczyć go w jasnych kolorach.

przeciwieństwo tego jest również możliwe, poprzez zdefiniowanie serii reguł debugowania i dodanie tej klasy do dowolnego elementu, który chcemy zobaczyć. Na przykład powyżej zdefiniowałem nową klasę o nazwie debug z następującym kodem.

.debug{ border:1px solid red; }

i ilekroć chcę debugować dowolny element, po prostu dodaję klasę debug do tego elementu.

<div class="foo debug">Div element with foo and debug classes</div>

3) debugowanie CSS przy użyciu JavaScript

ta technika jest bardzo podobna do powyższej, jednak czasami z dziwnych powodów zdarza się, że powyższa sytuacja nie jest wykonalna. Jest to fragment kodu jQuery, który przychodzi nam z Pomocą poprzez zastosowanie klasy debug do elementu foo, lub nawet dodanie CSS bezpośrednio do elementu bar w tym przypadku.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

taka sytuacja może się zdarzyć bardzo rzadko, ale wiem, że używałem tej techniki w przeszłości, więc dobrze wiedzieć.

4) poznaj kaskadę

niektóre problemy z CSS są tak powszechne, jak pływaki clearing, że wpadniesz w pułapkę raz, a następnym razem napotkasz coś podobnego, wiesz, co spowodowało problem i jak go naprawić. Ogólnie rzecz biorąc, większość problemów CSS jest łatwa do rozwiązania, jeśli wiesz, jak reguły CSS zastępują się nawzajem. Na przykład bardziej specyficzne selektory nadpisują bardziej ogólne lub selektor ID nadpisuje selektor klasy lub deklaracja !important ma pierwszeństwo przed deklaracją normalną. Poznanie kaskady pomoże Ci rozwiązać swój kod arkuszy stylów kaskadowych szybciej.

oto przykład prosto ze specyfikacji W3C na temat specyfiki selektora.

kilka przykładów:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

w powyższym przykładzie kolor elementu P będzie zielony. Deklaracja w atrybucie „style” nadpisze tę w elemencie STYLE z powodu zasady kaskadowej 3, ponieważ ma wyższą specyficzność. Jeśli uważasz, że ten przykład jest trudny do zrozumienia, sprawdź ten artykuł na temat hierarchii CSS.

Uwagi końcowe

osiągnięcie doskonałych wyników w pikselach jest trudne ze względu na różne renderowanie przez różne przeglądarki. Niektóre stare przeglądarki nie obsługują pełnego CSS3 lub HTML5, więc sprawdź Html5proase community project, aby sprawdzić, czy składnia, której próbujesz użyć, jest obsługiwana przez większość przeglądarek. Można jednak opcjonalnie użyć fallbacks lub polyfills, aby zapewnić brakujące funkcje dla przeglądarek, które nie obsługują pełnej implementacji CSS3 lub HTML5.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.