Interface utilisateur CSS

Anne Coulombe23 de April de 2023

1 minute read

Interface utilisateur CSS

Dans ce chapitre, vous découvrirez les propriétés d’interface utilisateur CSS suivantes :

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.

Propriété
redimensionner	4.0	79,0	5.0	4.0	15,0
contour-décalage	4.0	15,0	5.0	4.0	9.5

Redimensionnement CSS

Le resize La propriété spécifie si (et comment) un élément doit être redimensionnable par l’utilisateur.

Cet élément div est redimensionnable par l’utilisateur !

Pour redimensionner : cliquez et faites glisser le coin inférieur droit de cet élément div.

L’exemple suivant permet à l’utilisateur de redimensionner uniquement la largeur d’un élément

L’exemple suivant permet à l’utilisateur de redimensionner uniquement la hauteur d’un élément

L’exemple suivant permet à l’utilisateur de redimensionner à la fois la hauteur et la largeur d’un élément

Dans de nombreux navigateurs, est redimensionnable par défaut. Ici, nous avons utilisé la propriété resize pour désactiver le redimensionnement :</p> <hr/> <hr/> <h2>Décalage du contour CSS</h2> <p>Le <code class="w3-codespan">outline-offset</code> La propriété ajoute un espace entre un contour et le bord ou la bordure d’un élément.</p> <p>Cette div a un contour de 15 pixels à l’extérieur du bord de la bordure.</p> <div class="w3-panel w3-note"> <p><b>Note:</b> Le contour diffère des bordures ! Contrairement à la bordure, le contour est dessiné à l’extérieur de la bordure de l’élément et peut chevaucher d’autres contenus. De plus, le contour ne fait PAS partie des dimensions de l’élément ; la largeur et la hauteur totales de l’élément ne sont pas affectées par la largeur du contour.</p> </div> <p>L’exemple suivant utilise le <code class="w3-codespan">outline-offset</code> propriété pour ajouter de l’espace entre la bordure et le contour :</p> <div class="w3-example"> <h3>Exemple</h3> <div class="w3-code notranslate cssHigh"> <p> div.ex1 {<br /> marge : 20px ;<br /> bordure : 1 pixel noir uni ;<br /> contour : 4 pixels rouge uni ;<br /> <br /> décalage de contour : 15 px ;<br />} </p> <p>div.ex2 {<br /> marge : 10px ;<br /> bordure : 1 pixel noir uni ;<br /> contour : 5px bleu en pointillés ;<br /> décalage de contour : 5 px ;<br />} </p> </div> <p>Essayez-le vous-même » </p></div> <hr/> <h2>Propriétés de l’interface utilisateur CSS</h2> <p>Le tableau suivant répertorie toutes les propriétés de l’interface utilisateur :</p> <table class="ws-table-all notranslate"> <tr> <th style="width:28%">Propriété</th> <th>Description</th> </tr> <tr> <td>contour-décalage</td> <td>Ajoute de l’espace entre un contour et le bord ou la bordure d’un élément</td> </tr> <tr> <td>redimensionner</td> <td>Spécifie si oui ou non un élément est redimensionnable par l’utilisateur</td> </tr> </table> </div> <p>#Interface #utilisateur #CSS</p> <div class="post-bottom-meta post-bottom-tags post-tags-modern"><div class="post-bottom-meta-title"><span class="tie-icon-tags" aria-hidden="true"></span> Tags</div><span class="tagcloud"><a href="https://samfirm.online/tag/css/" rel="tag">CSS</a> <a href="https://samfirm.online/tag/interface/" rel="tag">Interface</a> <a href="https://samfirm.online/tag/utilisateur/" rel="tag">utilisateur</a></span></div> </div> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div id="single-post-meta" class="post-meta clearfix"><span class="author-meta single-author no-avatars"><span class="meta-item meta-author-wrapper meta-author-3"><span class="meta-author"><a href="https://samfirm.online/author/anne-coulombe/" class="author-name tie-icon" title="Anne Coulombe">Anne Coulombe</a></span></span></span><span class="date meta-item tie-icon">23 de April de 2023</span><div class="tie-alignright"><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> 1 minute read</span> </div></div> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2023-04-23T08:10:23+00:00","datePublished":"2023-04-23T08:10:23+00:00","dateModified":"2023-04-23T08:10:23+00:00","headline":"Interface utilisateur CSS","name":"Interface utilisateur CSS","keywords":"CSS,Interface,utilisateur","url":"https:\/\/samfirm.online\/interface-utilisateur-css\/","description":"Interface utilisateur CSS Dans ce chapitre, vous d\u00e9couvrirez les propri\u00e9t\u00e9s d'interface utilisateur CSS suivantes\u00a0: Prise en charge du navigateur Les nombres dans le tableau indiquent la premi\u00e8re vers","copyrightYear":"2023","articleSection":"HTML & CSS","articleBody":"\n \n\n\n\n\nInterface utilisateur CSS\nDans ce chapitre, vous d\u00e9couvrirez les propri\u00e9t\u00e9s d'interface utilisateur CSS suivantes\u00a0:\n\n\n\nPrise en charge du navigateur\nLes nombres dans le tableau indiquent la premi\u00e8re version du navigateur qui prend enti\u00e8rement en charge la propri\u00e9t\u00e9.\n\n\n \n Propri\u00e9t\u00e9\n \n \n \n \n \n \n \n redimensionner\n 4.0\n 79,0\n 5.0\n 4.0\n 15,0\n \n \n contour-d\u00e9calage\n 4.0\n 15,0\n 5.0\n 4.0\n 9.5\n \n\n\n\n\nRedimensionnement CSS\nLe resize La propri\u00e9t\u00e9 sp\u00e9cifie si (et comment) un \u00e9l\u00e9ment doit \u00eatre redimensionnable par l'utilisateur.\nCet \u00e9l\u00e9ment div est redimensionnable par l'utilisateur\u00a0!\nPour redimensionner : cliquez et faites glisser le coin inf\u00e9rieur droit de cet \u00e9l\u00e9ment div.\n\n\nL'exemple suivant permet \u00e0 l'utilisateur de redimensionner uniquement la largeur d'un \u00e9l\u00e9ment \u00a0:\n\n\nL'exemple suivant permet \u00e0 l'utilisateur de redimensionner uniquement la hauteur d'un \u00e9l\u00e9ment \u00a0:\n\n\nL'exemple suivant permet \u00e0 l'utilisateur de redimensionner \u00e0 la fois la hauteur et la largeur d'un \u00e9l\u00e9ment \u00a0:\n\n\nDans de nombreux navigateurs, est redimensionnable par d\u00e9faut. Ici, nous avons utilis\u00e9 la propri\u00e9t\u00e9 resize pour d\u00e9sactiver le redimensionnement\u00a0:\n\n\n\n\n\nD\u00e9calage du contour CSS\nLe outline-offset La propri\u00e9t\u00e9 ajoute un espace entre un contour et le bord ou la bordure d'un \u00e9l\u00e9ment.\n\nCette div a un contour de 15 pixels \u00e0 l'ext\u00e9rieur du bord de la bordure.\n\n\nNote: Le contour diff\u00e8re des bordures\u00a0! Contrairement \u00e0 la bordure, le contour est dessin\u00e9 \u00e0 l'ext\u00e9rieur de la bordure de l'\u00e9l\u00e9ment et peut chevaucher d'autres contenus. De plus, le contour ne fait PAS partie des dimensions de l'\u00e9l\u00e9ment ; la largeur et la hauteur totales de l'\u00e9l\u00e9ment ne sont pas affect\u00e9es par la largeur du contour.\n\n\nL'exemple suivant utilise le outline-offset propri\u00e9t\u00e9 pour ajouter de l'espace entre la bordure et le contour\u00a0:\n\n\nExemple\n\n \n div.ex1 { marge : 20px ; bordure\u00a0: 1\u00a0pixel noir uni\u00a0; contour\u00a0: 4\u00a0pixels rouge uni\u00a0; \n d\u00e9calage de contour\u00a0: 15\u00a0px\u00a0;} div.ex2 { marge : 10px ; bordure\u00a0: 1\u00a0pixel noir uni\u00a0; contour : 5px bleu en pointill\u00e9s ; d\u00e9calage de contour\u00a0: 5\u00a0px\u00a0;} \n\nEssayez-le vous-m\u00eame \u00bb\n\n\n\nPropri\u00e9t\u00e9s de l'interface utilisateur CSS\nLe tableau suivant r\u00e9pertorie toutes les propri\u00e9t\u00e9s de l'interface utilisateur\u00a0:\n\n \n Propri\u00e9t\u00e9\n Description\n \n \n contour-d\u00e9calage\n Ajoute de l'espace entre un contour et le bord ou la bordure d'un \u00e9l\u00e9ment\n \n \n redimensionner\n Sp\u00e9cifie si oui ou non un \u00e9l\u00e9ment est redimensionnable par l'utilisateur\n \n\n\n\n\n\n\n\n\r\n #Interface #utilisateur #CSS","publisher":{"@id":"#Publisher","@type":"Organization","name":"SAMFIRM","logo":{"@type":"ImageObject","url":"https:\/\/samfirm.online\/wp-content\/uploads\/2023\/04\/512D.jpg"}},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/samfirm.online\/interface-utilisateur-css\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Anne Coulombe","url":"https:\/\/samfirm.online\/author\/anne-coulombe\/"},"image":{"@type":"ImageObject","url":"http:\/\/samfirm.online\/wp-content\/uploads\/2023\/04\/COUR-2.jpg","width":1920,"height":0}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links "> <a href="https://www.facebook.com/sharer.php?u=https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn large-share-button" data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="social-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Interface%20utilisateur%20CSS&url=https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="Twitter" target="_blank" class="twitter-share-btn large-share-button" data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="social-text">Twitter</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://samfirm.online/interface-utilisateur-css/&title=Interface%20utilisateur%20CSS" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://samfirm.online/interface-utilisateur-css/&name=Interface%20utilisateur%20CSS" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://samfirm.online/interface-utilisateur-css/&description=Interface%20utilisateur%20CSS&media=http://samfirm.online/wp-content/uploads/2023/04/COUR-2.jpg" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://vk.com/share.php?url=https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="mailto:?subject=Interface%20utilisateur%20CSS&body=https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="Share via Email" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Share via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Print" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Print</span> </a> </div> </div> </article> <div class="post-components"> <div class="about-author container-wrapper about-author-3"> <div class="author-info"> <h3 class="author-name"><a href="https://samfirm.online/author/anne-coulombe/">Anne Coulombe</a></h3> <div class="author-bio"> </div> <ul class="social-icons"></ul> </div> <div class="clearfix"></div> </div> <div id="related-posts" class="container-wrapper has-extra-post"> <div class="mag-box-title the-global-title"> <h3>Related Articles</h3> </div> <div class="related-posts-list"> <div class="related-item"> <a aria-label="CSS Flexbox (boîte flexible)" href="https://samfirm.online/css-flexbox-boite-flexible/" class="post-thumb"><img post-id="309" fifu-featured="1" width="390" height="220" src="http://samfirm.online/wp-content/uploads/2023/04/COUR-2.jpg" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://samfirm.online/css-flexbox-boite-flexible/">CSS Flexbox (boîte flexible)</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">23 de April de 2023</span></div> </div> <div class="related-item"> <a aria-label="Conversion PX à EM" href="https://samfirm.online/conversion-px-a-em/" class="post-thumb"><img post-id="309" fifu-featured="1" width="390" height="220" src="http://samfirm.online/wp-content/uploads/2023/04/COUR-2.jpg" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://samfirm.online/conversion-px-a-em/">Conversion PX à EM</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">22 de April de 2023</span></div> </div> <div class="related-item"> <a aria-label="Conteneur de grille CSS" href="https://samfirm.online/conteneur-de-grille-css/" class="post-thumb"><img post-id="309" fifu-featured="1" width="390" height="220" src="http://samfirm.online/wp-content/uploads/2023/04/COUR-2.jpg" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://samfirm.online/conteneur-de-grille-css/">Conteneur de grille CSS</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">23 de April de 2023</span></div> </div> <div class="related-item"> <a aria-label="Valeurs de couleur légales CSS" href="https://samfirm.online/valeurs-de-couleur-legales-css/" class="post-thumb"><img post-id="309" fifu-featured="1" width="390" height="220" src="http://samfirm.online/wp-content/uploads/2023/04/COUR-2.jpg" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://samfirm.online/valeurs-de-couleur-legales-css/">Valeurs de couleur légales CSS</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">23 de April de 2023</span></div> </div> </div> </div> </div> </div> <div id="check-also-box" class="container-wrapper check-also-right"> <div class="widget-title the-global-title"> <div class="the-subtitle">Check Also</div> <a href="#" id="check-also-close" class="remove"> <span class="screen-reader-text">Close</span> </a> </div> <div class="widget posts-list-big-first has-first-big-post"> <ul class="posts-list-items"> <li class="widget-single-post-item widget-post-list"> <div class="post-widget-thumbnail"> <a aria-label="Info-bulle CSS" href="https://samfirm.online/info-bulle-css/" class="post-thumb"><span class="post-cat-wrap"><span class="post-cat tie-cat-2">HTML & CSS</span></span><img post-id="309" fifu-featured="1" width="390" height="220" src="http://samfirm.online/wp-content/uploads/2023/04/COUR-2.jpg" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> </div> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://samfirm.online/info-bulle-css/">Info-bulle CSS</a> <div class="post-meta"> <span class="date meta-item tie-icon">23 de April de 2023</span> </div> </div> </li> </ul> </div> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div> </div> <div id="site-info" class="site-info site-info-layout-2"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first">© 2023, Tous droits réservés | <span style="color:red;" class="tie-icon-heart"></span> <a href="https://samfirm.online" target="_blank" rel="nofollow noopener"> SAMFIRM</a></div><ul class="social-icons"></ul> </div> </div> </div> </div> </footer> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Interface%20utilisateur%20CSS&url=https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="Twitter" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">Twitter</span> </a> <a href="https://api.whatsapp.com/send?text=Interface%20utilisateur%20CSS%20https://samfirm.online/interface-utilisateur-css/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://samfirm.online/interface-utilisateur-css/&text=Interface%20utilisateur%20CSS" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> </div> </div> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Back to top button</span> </a> </div> <aside class=" side-aside normal-side dark-skin dark-widgetized-area slide-sidebar-desktop is-fullwidth appear-from-left" aria-label="Secondary Sidebar" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://samfirm.online/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Search" /> </form> </div> <div id="mobile-menu" class="hide-menu-icons"> </div> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul></ul> </div> </div> <div id="slide-sidebar-widgets"> <div id="block-2" class="container-wrapper widget widget_block widget_search"><form role="search" method="get" action="https://samfirm.online/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"><label for="wp-block-search__input-1" class="wp-block-search__label" >Search</label><div class="wp-block-search__inside-wrapper " ><input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder="" required /><button type="submit" class="wp-block-search__button wp-element-button" >Search</button></div></form><div class="clearfix"></div></div><div id="block-3" class="container-wrapper widget widget_block"><div class="wp-block-group is-layout-flow"><div class="wp-block-group__inner-container"><h2 class="wp-block-heading">Entradas recientes</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://samfirm.online/certificat-python-infodewi/">Certificat Python Infodewi</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://samfirm.online/quizz-python/">Quizz Python</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://samfirm.online/exercices-python/">Exercices Python</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://samfirm.online/compilateur-en-ligne-python-editeur-interprete/">Compilateur en ligne Python (éditeur / interprète)</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://samfirm.online/exemples-python/">Exemples Python</a></li> </ul></div></div><div class="clearfix"></div></div><div id="block-4" class="container-wrapper widget widget_block"><div class="wp-block-group is-layout-flow"><div class="wp-block-group__inner-container"><h2 class="wp-block-heading">Comentarios recientes</h2><div class="no-comments wp-block-latest-comments">No comments to show.</div></div></div><div class="clearfix"></div></div> </div> </div> </aside> </div> </div> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Cookie Settings" style="background-color:#0056a7"> <button class="cky-btn-revisit" aria-label="Cookie Settings"> <img src="http://samfirm.online/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4;color:#212121"> <div class="cky-notice"> <p class="cky-title" data-cky-tag="title" style="color:#212121">We value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customize" data-cky-tag="settings-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Customize</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#1863dc;border-color:#1863dc">Accept All</button> </div></div></div></div></div><div class="cky-modal"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" data-cky-tag="detail-title" style="color:#212121">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="http://samfirm.online/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyze how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Reject All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Save My Preferences </button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#ffffff;background-color:#1863dc;border-color:#1863dc"> Accept All </button> </div><div style="padding: 8px 24px;font-size: 12px;font-weight: 400;line-height: 20px;text-align: right;border-radius: 0 0 6px 6px;direction: ltr;justify-content: flex-end;align-items: center;background-color:#EDEDED;color:#293C5B" data-cky-tag="detail-powered-by"> Powered by <a target="_blank" rel="noopener" href="https://www.cookieyes.com/product/cookie-consent" style="margin-left: 5px;line-height: 0"><img src="http://samfirm.online/wp-content/plugins/cookie-law-info/lite/frontend/images/poweredbtcky.svg" alt="Cookieyes logo" style="width: 78px;height: 13px;margin: 0"></a> </div></div></div></div></script><div id="reading-position-indicator"></div><div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Search"> <form method="get" class="tie-popup-search-form" action="https://samfirm.online/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Search for" autocomplete="off" placeholder="Search for" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Search for</span> </button> </form> </div> </div> </div> <div id="tie-popup-login" class="tie-popup" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div class="tie-popup-container"> <div class="container-wrapper"> <div class="widget login-widget"> <div class="widget-title the-global-title"> <div class="the-subtitle">Log In <span class="widget-title-icon tie-icon"></span></div> </div> <div class="widget-container"> <div class="login-form"> <form name="registerform" action="https://samfirm.online/wp-login.php" method="post"> <input type="text" name="log" title="Username" placeholder="Username"> <div class="pass-container"> <input type="password" name="pwd" title="Password" placeholder="Password"> <a class="forget-text" href="https://samfirm.online/wp-login.php?action=lostpassword&redirect_to=https%3A%2F%2Fsamfirm.online">Forget?</a> </div> <input type="hidden" name="redirect_to" value="/interface-utilisateur-css/"/> <label for="rememberme" class="rememberme"> <input id="rememberme" name="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me </label> <button type="submit" class="button fullwidth login-submit">Log In</button> </form> </div> </div> </div> </div> </div> </div> <script type='text/javascript' src='https://samfirm.online/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.7.7' id='swv-js'></script> <script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/samfirm.online\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://samfirm.online/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.7.7' id='contact-form-7-js'></script> <script type='text/javascript' id='tie-scripts-js-extra'> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/samfirm.online\/wp-admin\/admin-ajax.php","is_taqyeem_active":"","is_sticky_video":"1","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"default","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"","lang_no_results":"Nothing Found","sticky_share_mobile":"true","sticky_share_post":""}; /* ]]> */ </script> <script type='text/javascript' src='https://samfirm.online/wp-content/themes/jannah/assets/js/scripts.min.js?ver=5.4.10' id='tie-scripts-js'></script> <script type='text/javascript' src='https://samfirm.online/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=5.4.10' id='tie-js-ilightbox-js'></script> <script type='text/javascript' src='https://samfirm.online/wp-content/themes/jannah/assets/js/desktop.min.js?ver=5.4.10' id='tie-js-desktop-js'></script> <script type='text/javascript' src='https://samfirm.online/wp-content/themes/jannah/assets/js/live-search.js?ver=5.4.10' id='tie-js-livesearch-js'></script> <script type='text/javascript' src='https://samfirm.online/wp-content/themes/jannah/assets/js/single.min.js?ver=5.4.10' id='tie-js-single-js'></script> <script type='text/javascript' src='https://samfirm.online/wp-content/themes/jannah/assets/js/br-news.js?ver=5.4.10' id='tie-js-breaking-js'></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> </body> </html>