Base64 generator und Bild grösse ?

  • Hallo,


    ich schlage vor, du lässt das mit dem Base64. Das bringt dir keine Vorteile, außer dass du alles in einer Datei hast.


    Zitat

    Vermeidung von data:-URIs

    Hintergrundgrafiken können als Grafik auf dem Dateisystem oder als base64-kodierte data:-URI angegeben werden. Letzteres hat natürlich den Vorteil, keine weiteren Dateien zu benötigen, man kann alles mit dem CSS mitgeben. Auf den about:-Seiten von Firefox funktioniert dies in Zukunft aber nicht mehr, da data:-URIs XSS-Sicherheitslücken begünstigen. Und ganz unabhängig davon sind diese um ein vielfaches langsamer und erzeugen mehr CPU-Last, als wenn Grafiken auf dem konventionellen Weg eingebunden werden. Daher ist der Weg, Grafiken zu verwenden, definitiv der bessere Weg.


    Best Practices für CSS-Beispiele

  • ok Danke Sören und Andreas, aber wie zum Geier muß dann der Pfad lauten ?

    Beipsiel für das Download Symbol


    ich weis ja nicht wo der Pfad ist im Scrennshot.

    wie mach das dann am besten mit den icons als Grafik ala SVG oder PNG. ?

  • Meinst du diesen Button damit?



    CSS
    1. #downloads-button {
    2. -moz-appearance: none !important;
    3. background: url("file:///C:/Users/Andi/Icons%20Firefox/Computer_File_061.gif")no-repeat !important;
    4. background-position: 5px 7px!important;
    5. }
    6. #downloads-indicator-icon,
    7. #downloads-indicator-progress-outer {
    8. display: none !important;
    9. }
  • eigentlich ja, aber wo muß das Icon auf meiner Festplatte sein, den Pfad meine ich.

    und wie muß das dann im CSS geschrieben werden ?


    wen nich jetzt z:b so einen Pfad habe

    Zitat


    C:\Users\Papa\AppData\Roaming\Mozilla\Firefox\Profiles\e5kkv0bu.Test\chrome

    undi m Chrome habe ich ein Ordner "Icons" angelegt wie mit CSS und CSSWeb.


    oder geht es einfacher ?

  • Bei mir befindet sich das Icon im Profilordner im Unterordner chrome/icons und ist sehr einfach auch so anzusprechen:


    url('./icons/Stern gold.png')

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)

  • Sorry, das ich mich hier anhänge.

    Ich habe versucht diesen Code umzustricken:


    Dabei ist folgendes passiert:

    Er hat die vorgegebenen Ornericon behalten und die neuen hochkant drüber gesetzt.

    Wie bekomme ich die, vom Fx, vorgegebenen Ordnersymbol weg?



    Ich habe die alte base64 Datei extra auf Kommentar dringelassen.

  • Danke, so soll es ein.

    Ich bin also schon auf dem richtigen Weg, die Icons "umzuwandeln".

    Der Rest kommt dann auch noch.


    Ach eine Verständnisfrage noch. Warum fehlt hier das ´no-repeat´?

  • Hab mich hier mal versucht, scheitere aber dran.


  • Code
    1. /*Lesezeichen Sidebar - Ordnericon normal gelb*/
    2. treechildren::-moz-tree-image(container) {
    3. list-style-image: url-moz-appearance: none !important;
    4. background: url("file:///H:/Icons/ordnergelbindex.png")no-repeat !important;
    5. }

    Dabei ist folgendes passiert:

    Er hat die vorgegebenen Ornericon behalten und die neuen hochkant drüber gesetzt.

    Wie bekomme ich die, vom Fx, vorgegebenen Ordnersymbol weg?

    Du hast in Zeile 4 noch einen Rest von der alten Methode, Grafiken einzubinden. Den Text

    list-style-image: url musst du noch herauslöschen.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • scheitere aber dran.

    Teste bitte:


  • Passt perfekt. Danke. :thumbup:


    Nun aber eine klärende Frage.

    Im Code #14 gibt es nach dem Icon-Aufruf kein "no-repeat", im Gegenzug dafür aber im Beitrag #19.

    Hängr es damit zusammen, das einmal mit: list-style und einmal mit background aufgerufen wird?