资讯中心 资讯详情
了解企业新闻和行业动态,获取官网通知公告,掌握做网站的基本知识和技巧!

前端开发人员的新时代: css自定义属性、js随需应变和灵活的排版

来源:易助科技网浏览量:35收藏

随着人们期待已久的里程碑——Internet Explorer的停产——前端开发人员终于能够利用一整套现代浏览器功能。当然,我们借此机会根据最新标准开发客户项目,并使我们的基本主题更加高效和清晰,包括自动提供许多对齐和布局规则——这意味着我们能够删除大部分遗留代码。最重要的是,我们可以更加完全专注于客户项目的需求。


前端开发人员的新时代:  css自定义属性、js随需应变和灵活的排版-易助科技网



CSS自定义属性


2019我们开始使用自定义CSS自定义属性,也称为CSS变量。这使我们能够像处理SCSS一样,处理CSS代码库中的变量。但是,最大的优点是自定义属性直接位于浏览器中,也可以在浏览器中进行操作。

我们现在可以简单地更改CSS属性的值,而不必一遍又一遍地重新编译我们的代码——例如,在更改颜色值时。不仅在开发过程中,而且取决于运行时属性,甚至在CSS的级联层次结构中。这使我们的CSS更加清晰高效。


/* 我们使用“body”作为基本元素,而不是“:root”,以保持我们的CSS与WordPress Core兼容。 */

body {
    --sht--text-color: #111;
    color: var(--sht--text-color);
}

aside {
    --sht--text-color: #444;
}


此外,现代浏览器还允许使用JavaScript设置自定义CSS自定义属性的值。这个功能还极大地简化了我们的代码库,尤其是CSS和JavaScript的交互。例如,在页眉固定且内容必须移动的项目中。

通过使用JavaScript事件监听器观察页眉的高度,我们可以不断地重新定义自定义CSS属性的值。我们也可以通过直接在元素上计算像素值来实现这一点。通过使用CSS自定义属性,我们可以更容易地将值应用于多个元素。


在 JavaScript 中:


const watchPageHeaderHeight => (){
    document.documentElement.style.setProperty(
        '--sht--page-header--height',
        document.querySelector('.c-masthead').offsetHeight + 'px'
    );
};

watchPageHeaderHeight();
window.addEventListener('load', watchPageHeaderHeight);
window.addEventListener('resize', watchPageHeaderHeight);


在 CSS 中:


main, aside {
    padding-top: var(--sht--page-header--height);
}



JavaScript 演绎者


现在我们非常重视项目的绩效,特别是加载JavaScript是我们可以非常有效地节省加载和渲染时间的地方之一。我们基本上停止使用jQuery:从那以后,我们几乎所有的函数都是用“Vanilla”JavaScript编写的。对于更复杂的界面和web应用程序功能,我们主要使用Preact,这是ReactJS的一个非常小的替代品。

我们过去常常将所有的JavaScript代码加载到一个压缩文件中。然而,与此同时,我们可以优化这一点:因为我们只在HTML呈现过程的最后加载脚本,所以我们可以立即看到页面上有哪些HTML元素。通过在开发过程中将JavaScript拆分成更小的文件,我们现在只能在真正需要的时候加载单个脚本。


// sht_scripts是通过使用wp_localize_script从HTML中作为对象传递的。
const accordions = document.querySelectorAll('[data-accordion]');

if (!!accordions.length) {
    let script = document.createElement('script');
    script.setAttribute(
        'src',
        sht_scripts.theme.directory_uri + '/assets/scripts/accordion.min.js?version=' + sht_scripts.theme.version
    );
    document.head.appendChild(script);
}



灵活的排版


自2010年以来,我首先使用CSS断点为移动设备、平板电脑和台式电脑定义了字体大小。通过对每个项目的实践,我们创建了一个高效的例程,几乎没有任何问题。然而,在少数特殊情况下,当访问者访问屏幕大小非常不寻常的网站时,会出现分歧。此外,CSS有时相当复杂。也就是说,当使用许多断点时,或者当许多元素有自己的字体大小时。

为了解决这个问题,简化CSS并实现干净的排版,我们现在依赖于一个相当新的逻辑。这是排版规则的灵活定义。我们从最小的文本大小开始——通常是为拥有智能手机的访客——并使用CSS clamp,这样文本就可以流畅地变大,在台式电脑上达到最大大小。

因此,我们可以保证字体大小在任何屏幕宽度下都保持完美匹配和可读性。此外,我们的代码更轻、更简单,而且在这种情况下完全没有断点。(可以在Codepen中看到一个示例行为。)


body {
    --font-size--0: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.38rem);
    --font-size--1: clamp(1.20rem, calc(1.07rem + 0.64vw), 1.65rem);
    --font-size--2: clamp(1.44rem, calc(1.29rem + 0.77vw), 1.98rem);
    --font-size--3: clamp(1.73rem, calc(1.54rem + 0.93vw), 2.38rem);
    --font-size--4: clamp(2.07rem, calc(1.85rem + 1.11vw), 2.85rem);
    --font-size--5: clamp(2.49rem, calc(2.22rem + 1.33vw), 3.42rem);
    --font-size--6: clamp(2.99rem, calc(2.67rem + 1.60vw), 4.11rem);

    font-size: var(--font-size--0);
}

h1, .h1 {
    font-size: var(--font-size--6);
}

h2, .h2 {
    font-size: var(--font-size--5);
}

/* 等等... */



结论


CSS自定义属性等现代浏览器功能解决了web开发人员一直难以解决的许多问题,我们可以极大地简化开发,删除遗留代码,并更有效地满足客户的愿望。