GoogleChrome -- Bootstrap

pytanie zadane 27 listopada 2015 w HTML i CSS przez Voudubu Użytkownik (740 p.)
edycja 27 listopada 2015 przez Voudubu

Skończyłem pracę nad swoją stroną i podejrzałem ją pod Firefoxem i Google Chrome, i trochę się zdziwiłem, jak po jej wyrenderowaniu strona na FF i Chromie była w dosłownym chaosie. W Visual Studio korzystałem cały czas z podglądu IE i tutaj wszystko wyświetla się prawidłowo, ale jak zmienie na FF i Chroma to elementy strony są rozwalone.

Problem taki mam tylko z widokiem z danymi "Details" i trochę grafiki i tekstu tam jest. Reszta widoków renderuje się prawidłowo na wszystkich 3 przeglądarkach.

Jak mogę ogarnąć ten problem ze złym renderowaniem strony z Chromie i FF? Mam do kodu wklepany HTML reset, ale chyba tu coś więcej trzeba będzie zrobić? Może po prostu mam błąd gdzieś w kodzie, tj. gdzieś nie mam dodanych np. referencji do pliku css albo są jakieś zdublowane klasy czy coś takiego? W to wątpie, bo korzystam z WebEssentials, ale też może być to prawdopodobne bo trochę bałaganu w tym projekcie jest :P Czy może będę musiał zedytować poszczególne elementy i sprawdzać, czy każdy z nich poprawnie renderuje się jednocześnie w FF i Chromie i IE?

Jeszcze pytanie mam odnośnie Bootstrapa. Drugi projekt właśnie będę w nim robić, ale czy jest możliwość przerobienia czystego css na kod Bootstrapa? Bo jeśli jest taka opcja to od razu bym przerobił również ten pierwszy projekt, co by nie było więcej tego typu problemów z renderowaniem na różnych przeglądarkach/rozdzielczości.

1 odpowiedź

odpowiedź 28 listopada 2015 przez tomashpl Obywatel (1,370 p.)

Ad. 1: Obrałeś moim zdaniem złą kolejność - najpierw powinieneś zrobić pod Chrome, Fx (a nie FF), Operę, a dopiero potem stosować hacki pod IE. Pisanie strony z podglądem w IE to samobójstwo, bo ten program nie rozumie wielu atrybutów CSS, pomijając już rozbicie pomiędzy EDGE, IE 11, IE 10, IE 9, IE 8, IE 7 i niestety nadal dość popularne IE 6.

Ad. 2: Bootstrap to framework, który bazowo napisany jest w LESS (od wersji 4 w SASS) ale udostępniona biblioteka Bootstrapa to nic innego jak czysty CSS. Obawiam się, że nie ma narzędzi dopasowujących autorski CSS do CSS Bootstrapa, więc będziesz zmuszony obecne projekty przepisać, zarówno pod kątem CSS, jak i HTML.

Bootstrap oparty jest na gridzie, więc tworząc strukturę strony musisz już umieć zaplanować jak poszczególne elementy będą się wyświetlać w różnych rozdzielczościach. Bootstrap wykorzystuje do tego szereg klas, typu .col-xs-12 .col-md-6 .col-lg-3, które mogą być użyte na tym samym elemencie HTML i dzięki temu zachowana jest idea RWD.

Przerobienie już istniejących witryn www, tworzonych w inny sposób, jest możliwe, ale na pewno nie automatycznie.

komentarz 28 listopada 2015 przez Voudubu Użytkownik (740 p.)

Wiesz co, nawet mi to do głowy nie wpadło, żeby budować pierw pod Chrome i Fx, byłem bardziej skupiony raczej na mechanice strony niż na jej poprawnym wyświetlaniu w innych przeglądarkach i dopiero teraz to właśnie zauważyłem. Wiem, że IE głównie służy do pobrania innej przeglądarki, ale ustawienie jako default w VS zrobiło swoje i zdaje sobie sprawę też z tego, że na takim IE wyświetla się prawidłowo, a na Chromie może być inaczej, ale po prostu nie spodziewałem się aż takiej różnicy. Dobra, to skoro mówisz, że pozostaje mi tylko pozmienianie tego kodu to trzeba się za to zabrać, dzięki za pomoc :)