Strona główna

From CSS Mania Wiki

CSSmania

to zbiór różnych zagadnień związanych głównie z kaskadowymi arkuszami stylów CSS, (X)HTML-em, a czasem nawet garść informacji o Flash-u i PHP. Jeśli kiedyś udało Ci się rozwiązać jakiś problem - dopisz go tutaj. Może się komuś przydać. Zawarte tu informacje nie koniecznie mogą być w pełni aktualne, ale zawsze możesz to poprawić.

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) jest językiem służącym do opisu sposobu renderowania stron WWW. CSS został wypracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em.

HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to język składający się ze znaczników (ang. tags) stosowany do pisania stron WWW. HTML jest formalnie aplikacją SGML-a.

Spis treści 1 Podstawy 2 CSS 3 Flash 4 (X)HTML 5 Internet Explorer 6 Opera, mimo że firefox jest lepszy 7 Inne 8 Dostępność (Accessibility)

Podstawy

• Podstawy - dla CSS i HTML/XHTML - czyli zanim zaczniesz
• Narzędzia developerskie do wykorzystania w przeglądarkach
• Edytory - dla CSS i HTML/XHTML
• Lista przeglądarek www
• Optymalizacja CSS

CSS

Poniżej jest lista różnych rozwiązań do różnych zagadnień związanych z CSS.

• Box Model
  • BoxModel - zrozumienie Box Model-u w CSS-ie
  • BoxModelHack - jak poprawić Box Model w IE
• CssLayouts - jak wykorzystać CSS do budowy wyglądu z podziałem na:
  • FixedLayouts - używając stałej szerokości do budowy stron
  • AbsoluteLayouts - używając position: absolute do określania budowy stron
  • FloatLayouts - używając właściwości float do budowy stron
  • EmulatingFrames - emulacja ramek za pomocą CSS
  • TwoColumnLayouts - kolekcja dwukolumnowych layout-ów
  • ThreeColumnLayouts - kolekcja trzykolumnowych layout-ów
  • Positionig - pozycjonowanie, zasada działania i przykłady
  • FooterInfo - pozycjonowanie stopki przy użyciu CSS
  • AnyColumnLongest - jak zrobić wszystkie kolumy jednakowej wysokości
  • BorderSlants - użycie właściwości border do stworzenia iluzji nie-prostokątnych kształtów
  • Elastic Faux Columns - elastyczny Faux Column (kolumny fauxa)
  • RenderingMode - co to jest DOCTYPE i jaki ma wpływ na tryby renderowania: QuirksMode i StrictMode ? Jakie są różnie.
  • BrowserDetection - jak podawać różne arkusze stylów dla różnych przeglądarek?
• Hacks - hacki, czyli jak ujarzmić CSS-a
  • CssHack - szczegóły korzystania z tzw. hack-ów, aby ukryć wady danej przeglądarki
  • ScriptHacks - JavaScript i inne programy rozwiązujące problemy z CSS
  • AvoidingHacks - jak napisać akrkusz stlów, aby działał w każdej przeglądarce
• Fonts - fonty i ich właściwości
  • MyOwnFonts - jak użyc fontów z pliku zewnętrzenego ttf na swojej stronie?
  • FontSize - "jaki rozmiar font-ów wybrać?" jest jednym z najczęściej zadawanych pytań
  • ForceFontSize - wielu autorów używa stałych rozmiarów fontów określonych w px. Są jednak problemy, o których powinieneś wiedzieć.
  • LineHeight - related to font-size, this sets the (minimum) height of a line
  • UsingFontSize - szczegółowe informacje dotyczące rozmiaru font-ów
    • UsingPixels - więcej infromacji na temat rozmiaru font-ów w pikselach
    • UsingPoints - właściwość rozmiaru font-ów pt używaj tylko dla arkuszy do drukowania, które są najlepszą jednostką dla monitorów komputerowych
    • UsingEms - więcej szczegółów na temat rozmiaru font-ów w EM
    • UsingPercentages - trying to get a gradual scale across multiple browsers here\'s a sample css style sheet
    • UsingKeywords - xx-small, x-small, small, medium, large, x-large, xx-large
• Rozmiar obrazków
  • UsingPercent - nie czekaj na SVG; bądź elastyczny i silny
  • UsingEm - zmień rozmiar (resize on text zoom)
• Styling links
  • CssRollovers - rollovers (podmiana obrazków przy najechaniu myszy) przy użyciu tylko CSS
  • LinkTricks - ogólne tricki dla stylowania linków
• Stylowanie list
  • ListMenus - tworzenie menu przy wykorzystaniu list i CSS-a
  • NNFourListMenus - jak stworzyć menu oparte na liście działające w Netscape
  • ListTabs - jak zbudować tab-y za pomocą list i CSS-a
  • ListTricks - ogóle tricki stylowania list
  • MultipleColumnLists - jak zbudować pojedynczą listę, która wyświetli się w formie wielu kolumn
  • NumberingLists - lista z numeracją
  • TreeMenu - rozwijane menu typu "drzewiastego"
  • ListGaps - jak pozbyć się problemu z niechcianymi odstępami
• Tabele
  • ShowHideContent - pokaż/schowaj zawartość tabeli
  • NicerTables - przykłady ostylowania tabel
  • StylowanieKolumn
  • Cellspacing - jaki zapis w stylach zastępuje cellspacing="0" w table?
  • FixedHeader - przewijanie (scroll) tabeli ze stałą pozycją nagłówków tabeli
  • SortTable - sortowanie danych w tabeli, używając techniki client i server-side
• Stylowanie formularzy
  • FormElements - jak poprawnie zbudować formularz oraz jego ostylowanie
  • StylingInputTypeFile - jak zmienić wygląd input-a o typie file
• Miscellaneous:
  • ClassesVsIds - kiedy powinienem użyć CLASS-y, a kiedy użyć ID? (class kontra id)
  • ElementWidth - co naprawdę znaczy width (szerokość) i dlaczego jest tym, czym jest.
  • ProgressiveEnhancement using CSS - exploiting the advanced support of "Version 7" browsers
  • MediaStylesheets - jak napisać arkusz stylów dla różnych mediów, w tym dla urządzeń drukujących
  • StyleInEmail - stylowanie poczty elektronicznej w HTML-u
  • CssBarGraphs - przykłady generowania słupków w wykresach używając CSS-a
  • DropShadows - cienie
  • RoundedCorners - zaokrąglone narożniki (rogi)
  • InputRoundedCorners - zaokrąglone narożniki (rogi) w input, button
  • DotLeaders - problemy z kropkami
  • DropCaps - generowanie i modyfikowanie pierwszego znaku
  • InlineBlock - elementy inline i block
  • ImageSpacing - obrazki wyświetlają się w jednej lini, ale jest między nimi niepożądany odstęp.
  • ColgroupColBackgorund - tło w <colgroup> i <col>
• Błędy w przeglądarkach:
  • BrowserBugs - lista błędów posortowana wg przeglądarek
• Colors
  • BadColorsPNG - "dziwna" interpretacja kolorów i png
  • GetColor - programy i narzędzia do pobierania kolorów
• Dlaczego nie stosujemy tabel do tworzenia wyglądu?
  • WhyNoTables - zobacz argumenty mówiące o tym dlaczego do budowania layoutów nie stosuje się tabel
• Tips & Tricks
  • MapCSSonly - mapa świata, województw, itp. i możliwość stworzenia jej przy pomocy tylko html i css
  • VerticalText - tekst pionowy zamiast poziomego
  • StyleSwitching - jak pozwolić użytkownikowi zmienić arkusz stylów na stronie?
  • 100%Height - "rozciągnięcie" kontenera na 100% wysokości
  • RatingCSS - techniki tworzenia systemów głosowania
  • Opacity - wszystko, co powinieneś wiedzieć o przezroczystości
  • MultipleClasses - używanie wielu na raz klas (multiple classes)
  • Float
    • AlignLeftAndRight - ustawianie elementu z lewej lub prawej strony
    • ClearingSpace - czyszczenie miejsca poniżej float-owanych elementów
    • FloatThumbnails - miniaturka "tabeli", która używa maksymalnie dostępnej szerokości w poziomie
  • CenteringBlockElement - wyśrodkowanie bloku css
  • CenteringAbsoluteBlockElement - jak wycentrować element blokowy absolutnie pozycjonowany
  • CenteringAnImage - jak wycentrować dowolny obrazek wewnątrz kontenera o ustalonym rozmiarze
  • CenteringImageGallery - jak wycentrować dowolny obrazek a pod nim podpis jego
  • CenteringTextVertically - jak wycentrować tekst poziomo w bloku
  • HorizontalLine styles - jak ostylować poziomą linię (hr)
  • PRE znacznik i jego ostylowanie
  • HR element i jego ostylowanie
  • DisplayInline
  • ScreenreaderVisibility - tworzenie informacji dostępnych dla czytników głosowych, ale nie widocznych.
  • ImageReplacement - Farnher Image Replacement (FIR) to technika zastępowania tekstu obrazami podawanymi jako tło, oparta na CSS, częściowo współpracująca z czytnikami głosowymi
  • ChangingTheColorScheme - Changing the color-scheme after the design has been mostly completed
  • ToolTip - modyfikacja "chmurek", popularny tooltip
  • HideFocus - jak usunąć focusową otoczkę?
  • ImageWithTextVertically - jak wstawić obrazek z tekstem wyśrodkowanym w pionie, "przyklejonym" do boku obrazka?
  • ChangeSelect - jak zmienić wygląd select-a?
  • StylesheetOrder - dobra struktura, porządek, układ arkusza stylów - artykuły
  • ExpandableBox - box, który zachowuje swoje proporcjonalne rozmiary po powiększeniu/zmniejszeniu rozmiaru fontów
  • Table_of_contents - spis treści z kropkami
  • CSSbackgroundTransparency - "multiprzeglądarkowe" przezroczyste tło w background

Flash

• WhyFlashIsBad - dlaczego Flash jest niedobry do tworzenia stron www?
• FlashAndXHTML - poprawne osadzanie flash w html lub Quicktime i "przechodzenie przez validator"
• CreateFlash - tester kreacji Macromedia Flash.
• sIFR - technika pozwalająca uzyskać na stronach html dowolne fonty na dowolnym komputerze.
• Mute/Unmute - włączanie/wyłączanie dźwięków flash-a
• ConvertFLV - konwersja plików video na zaawansowany format Flash Video (FLV)
• FLV player - odtwarzacz FLV na stronie www

(X)HTML

• SemanticHTML - semantyka i html, czyli używanie znaczników zgodnie z ich przeznaczeniem
• MimeTypeXHTML - jak powinien być poprawnie wysłany dokument XHTML
• VideoinXHTML - osadzanie plików video w (X)HTML
• CommentsSemantically - komentarze: jak semantycznie je zapisać?
• DownloadFile - jak zapobiegać automatycznemu otwieraniu pliku w domyślnym programie?
• Screenreader&AuralBrowser - screenreader, aural browser - różnice

Internet Explorer

• TestingQuality - testowanie działania stron w IE
• IE7bugs - błędy w przeglądarce IE7
• IE7Standalone - IE7 i IE6 na jednym komputerze
• IELinux - IE7 pod Linuksem
• ConditionalComments - komentarze warunkowe (ang. conditional comments).
• Flickering - "miganie" tła w IE.
• htcWinXPSP2 - pliki htc i Windows XP SP2 (Service Pack 2).
• min-width max-width - max-width i min-width w IE
• 1pxDIV - problem z ustawieniem wysokości na 1px dla div
• EmulatingFixedPositoning - emulacja pozycjonowania typu fixed za pomocą pozycjonowania absolute w IE / Windows
• DebugBar - DOM Inspector, HTTP Inspector, Javascript Inspector i Javascript Console, HTML Validator i wiele innych opcji
• PNGOpacity - PNG Opacity (przezroczystość)
• OverflowOverlap - problem z overflow i obcinanie (przykrycie) tekstu
• hoverIE6 - efekt hover dla IE<=6
• Problemy z komentarzami - czasem komentarz w css może narobić problemów

Opera, mimo że firefox jest lepszy

• FlashWmode - opera, flash i tryb wmode

Inne

• CreateStreamingVideo - tworzenie filmów, webcastów, itp.
• AudioPlayers - odtwarzacze muzyki i obsługa przez www
• Panorama360 - tworzenie i umieszczanie na stronie www panoramy 360 stopni.
• DetectAllPlugins - jak wykryć jakie mamy wtyczki w systemie dostępne
• Gallery - tworzenie galerii
• NiceLinks - "ładne linki"
• WYSIWYG - edytory WYSIWYG
• WYSIWYM - edytory WYSIWYM
• FreeIcons - darmowe ikony

Dostępność (Accessibility)

• Captcha - wszystko o CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart)
• AccessibleForms - jak tworzyć dostępne formularze
• Sblam! - zabezpieczenie antyspamowe do formularzy, które nie przeszkadza niepełnosprawnym.
• 101 Practical Website Accessibility Tips for dummies
• Fitt's Law - zasada, która określa łatwość dostępu do elementów GUI. Wg Fittz's law łatwość określa powierzchnia elementu podzielona przez odległość jaką mysz musi do niego pokonać.