Externe CSS-Datei in DIV-Container laden

#1
Liebe Experten,

folgendes Problem:

Ich möchte eine externe CSS-Datei in einen DIV-Container laden. Diese CSS-Datei soll dann nur für den Container gelten, aber nicht für die ganze *.php-Seite.
Unter dem Container ist ein zweiter Container, in den eine andere externe CSS-Datei geladen werden soll. Auch diese soll nur "containerweit" gelten. Usw.

Wie macht man das am elegantesten?

Vielen Dank und beste Grüße

Dirk
 
#3
Die Sache mit dem scoped hatte ich auch gelesen - schade, dass das nicht implementiert wurde.

Die Container habe eindeutige IDs, aber dadurch würde die CSS-Datei sehr aufgebläht, was ich nicht so gerne möchte. Schöner fänder ich es, wenn diejweils gewünschte CSS-Datei dynamisch nachgeladen würde - aber nicht seitenweit, sondern nur für den Container. Geht da nicht was mit loadcss()?
 

asc

Well-Known Member
c-b Experte
#4
Klar kannst du die Stylesheets dynamisch nachladen. Du kannst mit SCSS (einem CSS-Dialekt mit Funktionen/Variablen usw.) diese Stylesheets auch dynamisch generieren lassen (oder genauer gesagt: du kannst dir mit SCSS das Kopieren+Einfügen der CSS-Regeln abnehmen lassen).

Ohne zu wissen warum du das überhaupt machen willst ist es schwer dir einen konkreten Lösungsweg vorzuschlagen.
 
#5
Ich habe mal mit loadcss() rumgebastelt - allerdings kann ich gerade nicht testen, ob das funktioniert.

Grundsätzliche Vorgehensweise:

(1) Alle drei relevanten CSS-Dateien, die nachgeladen werden sollen, werden im head preloaded.
(2) Die loadcss()-Funktion wird im head inline eingebaut. Alternative: Link to externer JS-Datei.
(3) Im body wird die loadcss() aufgerufen und der Funktion wird der Link zu der ersten gewünschten CSS-Datei übergeben.
(4) Es folgt der erste Container, der mit dieser CSS-Datei arbeitet.
(5) Im body wird die loadcss() aufgerufen und der Funktion wird der Link zu der zweiten gewünschten CSS-Datei übergeben.
(6) Es folgt der zweite Container, der mit dieser CSS-Datei arbeitet.

Warum unterschiedliche CSS-Dateien? Weil darin der Code ist für Image-Slider bezogen auf unterschiedliche Bildzahlen. Mit unterschiedlichen Keyframes-Anweisungen usw.

Das sähe dann so aus:



IN DEN HEAD:

Code:
<link rel="preload" href="css/slider20.css" as="style" >
<link rel="preload" href="css/slider10.css" as="style" >
<link rel="preload" href="css/slider5.css" as="style" >


<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/
(function( w ){
    "use strict";
    // rel=preload support test
    if( !w.loadCSS ){
        w.loadCSS = function(){};
    }
    // define on the loadCSS obj
    var rp = loadCSS.relpreload = {};
    // rel=preload feature support test
    // runs once and returns a function for compat purposes
    rp.support = (function(){
        var ret;
        try {
            ret = w.document.createElement( "link" ).relList.supports( "preload" );
        } catch (e) {
            ret = false;
        }
        return function(){
            return ret;
        };
    })();

    // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
    // then change that media back to its intended value on load
    rp.bindMediaToggle = function( link ){
        // remember existing media attr for ultimate state, or default to 'all'
        var finalMedia = link.media || "all";

        function enableStylesheet(){
            // unbind listeners
            if( link.addEventListener ){
                link.removeEventListener( "load", enableStylesheet );
            } else if( link.attachEvent ){
                link.detachEvent( "onload", enableStylesheet );
            }
            link.setAttribute( "onload", null );
            link.media = finalMedia;
        }

        // bind load handlers to enable media
        if( link.addEventListener ){
            link.addEventListener( "load", enableStylesheet );
        } else if( link.attachEvent ){
            link.attachEvent( "onload", enableStylesheet );
        }

        // Set rel and non-applicable media type to start an async request
        // note: timeout allows this to happen async to let rendering continue in IE
        setTimeout(function(){
            link.rel = "stylesheet";
            link.media = "only x";
        });
        // also enable media after 3 seconds,
        // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
        setTimeout( enableStylesheet, 3000 );
    };

    // loop through link elements in DOM
    rp.poly = function(){
        // double check this to prevent external calls from running
        if( rp.support() ){
            return;
        }
        var links = w.document.getElementsByTagName( "link" );
        for( var i = 0; i < links.length; i++ ){
            var link = links[ i ];
            // qualify links to those with rel=preload and as=style attrs
            if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
                // prevent rerunning on link
                link.setAttribute( "data-loadcss", true );
                // bind listeners to toggle media back
                rp.bindMediaToggle( link );
            }
        }
    };

    // if unsupported, run the polyfill
    if( !rp.support() ){
        // run once at least
        rp.poly();

        // rerun poly on an interval until onload
        var run = w.setInterval( rp.poly, 500 );
        if( w.addEventListener ){
            w.addEventListener( "load", function(){
                rp.poly();
                w.clearInterval( run );
            } );
        } else if( w.attachEvent ){
            w.attachEvent( "onload", function(){
                rp.poly();
                w.clearInterval( run );
            } );
        }
    }


    // commonjs
    if( typeof exports !== "undefined" ){
        exports.loadCSS = loadCSS;
    }
    else {
        w.loadCSS = loadCSS;
    }
}( typeof global !== "undefined" ? global : this ) );

</script>
IN DEN BODY

Code:
<script id="loadcss">
  // load a CSS file just before the script element containing this code
  loadCSS( "css/slider20.css", document.getElementById("loadcss") );
</script>

    <div class="wrapper20">


    </div>


<script id="loadcss">
  // load a CSS file just before the script element containing this code
  loadCSS( "css/slider10.css", document.getElementById("loadcss") );
</script>

    <div class="wrapper10">


    </div>
 
Zuletzt bearbeitet:
Oben