முக்கியமான CSS ஜெனரேட்டர்
மேம்பட்ட முக்கியமான CSS ஜெனரேட்டருக்கான இலவச உலாவி-விட்ஜெட் மற்றும் மேல்-மடிப்பு உகப்பாக்கி .
அபோவ்-தி-ஃபோல்ட் ஆப்டிமைசர்
அறிமுகம்
கிரிடிகல் CSS ஜெனரேட்டர், Google இன் முக்கிய வலை உயிர்கள் பயன்படுத்தப்படாத-CSS அபராதத்தை நீக்குகிறது , முற்றிலும் குறைந்தபட்ச CSS அடிப்படையில். இது ஒரு பிக்சல் சரியான முடிவை அடைய உதவுகிறது.
சிறந்த முக்கியமான CSS முடிவு உண்மையான உலாவியில் அடையப்படுகிறது.
முக்கியமான CSS பிரித்தெடுக்கப்பட வேண்டிய பக்கத்தில் உலாவி விட்ஜெட் செயல்படுத்தப்படுகிறது, எனவே அசல் CSS சூழலுக்கு முழு சொந்த அணுகலைக் கொண்டுள்ளது.
நீங்கள் ஸ்டைல்ஷீட்கள் அல்லது இன்லைன் ஸ்டைல்ஷீட் உறுப்புகளில் இருந்து முக்கியமான CSS ஐ பிரித்தெடுக்கலாம். பக்கங்களுக்கு இடையே பகிரக்கூடிய முக்கியமான CSS ஐ உருவாக்க இது எளிது.
உலாவி விட்ஜெட்டில் ஸ்டைல்ஷீட்களில் இருந்து முக்கியமான CSS ஐ அகற்றும் அம்சம் உள்ளது.
கருவி உளவு இல்லாதது. Google Analytics அல்லது கண்காணிப்பு இல்லை. பயன்படுத்த பாதுகாப்பானது மற்றும் சேவை பணியாளர் தற்காலிக சேமிப்பு மூலம் உள்நாட்டில் பயன்படுத்தலாம்.
Google Cloud இல் Chrome உலாவி மூலம் பயன்படுத்தக்கூடிய மேம்பட்ட முக்கியமான CSS மென்பொருளின் உதாரணத்தை உலாவி-விட்ஜெட் வழங்குகிறது. மேலும் தகவலுக்கு எங்கள் தொழில்முறை தேர்வுமுறை செருகுநிரலைப் பார்க்கவும்.
நிறுவு
விட்ஜெட்டை நிறுவ,
அல்லது கீழே உள்ள குறியீட்டை நகலெடுத்து ஒட்டவும்.x.pagespeed.pro
க்கான சர்வீஸ் ஒர்க்கர் மற்றும் கேச்-ஏபிஐஐ அங்கீகரிக்கவும், டொமைன்கள் முழுவதும் அமைப்புகளைத் தொடரவும், ஆஃப்லைனில் அல்லது localhost
பயன்படுத்தவும்.அம்சங்கள்
மேம்பட்ட முக்கியமான CSS ஜெனரேட்டர்
- சிறந்த CSS பாகுபடுத்திகளில் ஒன்றான PostCSS அடிப்படையில் தனிப்பயன் உருவாக்கப்பட்டது.
- பதிலளிக்கக்கூடிய முக்கியமான CSS க்காக பல-பார்வை போர்ட்களை (டெஸ்க்டாப் + மொபைல்) ஆதரிக்கிறது.
- க்ளிக், மவுஸ் நிகழ்வுகள் (ஹோவர், மூவ் போன்றவை), ஸ்க்ரோலிங், தனிப்பயன் ஜாவாஸ்கிரிப்ட் குறியீடு செயல்படுத்தல் மற்றும் பலவற்றை உள்ளடக்கிய உலாவிக் கட்டுப்பாடு போன்ற பொம்மலாட்டக்காரர்.
- கச்சா மேம்படுத்தப்படாத தூய முக்கியமான CSS வெளியீடு.
அபோவ்-தி-ஃபோல்ட் ஆப்டிமைசர்
- முக்கியமான CSS ஐ அசல் CSS உடன் ஒப்பிடுக.
- தனிப்பயனாக்கக்கூடிய பிக்சல் அளவீட்டு ஆட்சியாளர்கள்.
மேம்பட்ட தேர்வுமுறை கருவிகள்
- ஸ்டைல்ஷீட்களில் இருந்து முக்கியமான CSS ஐ அகற்ற பயன்படுத்தப்படாத CSS ரிமூவர்.
- நிபுணத்துவ CSS சுருக்கம் (மினிஃபை) மற்றும் தேர்வுமுறை மென்பொருள்.
- உடைந்த CSS பழுது. தவறான CSS ஐ சரிசெய்ய ஒரு கருவி.
- தன்னியக்க முன்னொட்டு. CSSக்கு உலாவி முன்னொட்டுகளைப் பயன்படுத்துவதற்கான ஒரு கருவி.
- CSS புள்ளிவிவரங்கள் மற்றும் பகுப்பாய்வு.
- CSS அழகுபடுத்துகிறது.
- மேம்பட்ட CSS லின்ட்.
- நகல் CSS ரிமூவர்.
- மேம்படுத்தப்பட்ட CSS எடிட்டர், மேம்படுத்தல் உதவிக்குறிப்புகளுடன் CSS லிண்டுடன் இணைக்கப்பட்டுள்ளது.
எப்படி உபயோகிப்பது
படி 1: ஒரு பக்கத்தில் உலாவி விட்ஜெட்டைத் தொடங்கவும்
முக்கியமான CSSஐப் பிரித்தெடுக்க விரும்பும் பக்கத்திற்குச் சென்று உலாவி விட்ஜெட்டைத் தொடங்கவும். நிறுவல் வழிமுறைகளுக்கு இங்கே கிளிக் செய்யவும் .
படி 2: முக்கியமான CSS ஐ உருவாக்கவும்
முக்கியமான CSS ஜெனரேட்டரை தலைப்பில் உள்ள கருவிகள் தாவல் வழியாக அணுகலாம்.
ஆவணத்தில் உள்ள விருப்பங்களைப் பயன்படுத்தி JSON ஐ உள்ளமைக்கவும்.
படி 3: முடிவை மேம்படுத்தவும்
முக்கியமான CSS ஜெனரேட்டரின் வெளியீடு கச்சா மற்றும் சுருக்கம் போன்ற கூடுதல் மேம்படுத்தல் தேவைப்படுகிறது.
எடிட்டர் மெனுவில் உள்ள Optimize பட்டன் மேம்பட்ட குறியீடு மேம்படுத்தல் மற்றும் சுருக்கத்தைப் பயன்படுத்த உதவுகிறது.
ஆவணப்படுத்தல்
முக்கியமான CSS ஜெனரேட்டர்
முக்கியமான CSS ஜெனரேட்டர் பின்வரும் விருப்பங்களை ஏற்றுக்கொள்கிறது.
எடுத்துக்காட்டு கட்டமைப்பைக் காட்டு
உதாரணம் முக்கியமான CSS ஜெனரேட்டர் கட்டமைப்பு
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [
"*",
"*:before",
"*:after",
"html",
"body"
],
"selectorsToRemove": [
"/\#C/",
"/\.chattxt/"
],
"propertiesToKeep": [],
"propertiesToRemove": [
"/(.*)transition(.*)/i",
"cursor",
"pointer-events",
"/(-webkit-)?tap-highlight-color/i",
"/(.*)user-select/i"
],
"pseudoSelectorsToKeep": [
"::before",
"::after",
"::first-letter",
"::first-line",
":before",
":after",
":first-letter",
":first-line",
":visited",
"/:nth-child.*/"
],
"pseudoSelectorsToRemove": [],
"maxElementsToCheckPerSelector": false,
"maxEmbeddedBase64Length": 1000,
"strictParser": false,
"ui_actions": [
{
"viewport": "360x640",
"notes": "மேலே உள்ள CSS கண்டுபிடிப்புக்கான காட்சிப் பகுதியை அமைக்கவும்."
},
{
"wait": 1000,
"notes": "வியூபோர்ட்டை வழங்குவதற்கு 1000ms காத்திருக்கவும்."
},
{
"run": true,
"notes": "முக்கியமான CSS ஜெனரேட்டரை இயக்கவும் (மடிப்புக்கு மேல் CSS கணக்கீடு)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "a.nav-menu DOM உறுப்பில் புதிய MouseEvent ஐ இயக்கவும்."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "ஒரு ஸ்கிரிப்டை இயக்கவும், இந்த விஷயத்தில் அடுத்த வியூபோர்ட்டைத் தொடர்வதற்கு முன் மெனுவை மூடவும்."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
முக்கியமான CSS ஜெனரேட்டரின் UI செயல்கள்
முக்கியமான CSS ஜெனரேட்டர், Puppeteer போன்ற உலாவிக் கட்டுப்பாட்டை வழங்குகிறது. ui_actions
அளவுருவானது UI செயல் பொருள்களுடன் கூடிய வரிசையை ஏற்றுக்கொள்கிறது, இது காலவரிசைப்படி UI நிலை மாற்றங்களை வரையறுக்கிறது.
run
தற்போதைய UI நிலையில் முக்கியமான CSS ஜெனரேட்டரை இயக்கவும். புதிய மேலே உள்ள CSS குறியீட்டைக் கண்டறிய, ஒவ்வொரு முறை UI நிலை மாறும்போதும் இந்தச் செயல் மீண்டும் செய்யப்பட வேண்டும்.
{
"run": true
}
wait
அடுத்த செயலைத் தொடர்வதற்கு முன் பல மில்லி விநாடிகள் காத்திருக்கவும்.
{
"wait": 1000
}
viewport
வியூபோர்ட் அளவை அமைக்கவும்.
{
"viewport": "1300x900"
}
scroll
வியூபோர்ட்டை உருட்டவும். விருப்பம் ஒரு எண் மதிப்பை (மேலே இருந்து பிக்சல்கள்), ஒரு சதவீத சரம் ( 50%
) அல்லது பிக்சல்களில் [x,y]
நிலைகள் கொண்ட வரிசையை ஏற்றுக்கொள்கிறது.
{
"scroll": 400
}
event
விருப்பமான DOM தேர்வியில் உலாவி நிகழ்வை ( new Event()
) தூண்டவும்.
{
"event": "click",
"selector": "a.link"
}
mouseevent
விருப்பமான DOM தேர்வியில் மவுஸ் நிகழ்வை ( new MouseEvent()
) தூண்டவும். செயல் mouseEventInit
அளவுருவை MouseEvent விருப்பங்களுடன் ஏற்றுக்கொள்கிறது, இதில் x,y ஒருங்கிணைப்புகளை அமைக்கும் திறன் உள்ளது. mouseEventInit
தவிர்க்கப்பட்டால், இயல்புநிலை விருப்பங்கள் {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
ஜாவாஸ்கிரிப்ட் குறியீட்டை மதிப்பிடவும். இந்தச் செயல் ஒரு பக்கத்தில் ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்க உதவுகிறது, எ.கா. மேலும் UI நிலை மாற்றங்களைச் செய்வதற்கு முன் பாப்அப்களை மூடுவதற்கு.
{
"script": "Popups.close();"
}
fn
ஜாவாஸ்கிரிப்ட் செயல்பாட்டை இயக்கவும். இந்தச் செயல் முன்-கட்டமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் செயல்பாட்டைச் செயல்படுத்த உதவுகிறது. கூடுதல் விருப்பம் "promise":true
ஒரு வாக்குறுதியை எதிர்பார்க்கவும், அடுத்த செயலைத் தொடரும் முன் வாக்குறுதி தீர்க்கப்படும் வரை காத்திருக்கவும் உதவுகிறது.
{
"fn": "action_to_perform",
"promise": true
}
notes
ஒவ்வொரு செயல் பொருளும் notes
அளவுருவை ஏற்றுக்கொள்கிறது, அது விளக்க உரையைச் சேர்க்கப் பயன்படும்.
{
"script": "add_to_cart();",
"notes": "தனிப்பட்ட பயன்பாட்டிற்கான UI செயலின் விளக்கம்"
}
எடுத்துக்காட்டு கட்டமைப்பைக் காட்டு
எடுத்துக்காட்டு UI செயல்கள் கட்டமைப்பு
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "மேலே உள்ள CSS கண்டுபிடிப்புக்கான காட்சிப் பகுதியை அமைக்கவும்."
},
{
"wait": 1000,
"notes": "வியூபோர்ட்டை வழங்குவதற்கு 1000ms காத்திருக்கவும்."
},
{
"run": true,
"notes": "முக்கியமான CSS ஜெனரேட்டரை இயக்கவும் (மடிப்புக்கு மேல் CSS கணக்கீடு)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "a.nav-menu DOM உறுப்பில் புதிய MouseEvent ஐ இயக்கவும்."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "ஒரு ஸ்கிரிப்டை இயக்கவும், இந்த விஷயத்தில் அடுத்த வியூபோர்ட்டைத் தொடர்வதற்கு முன் மெனுவை மூடவும்."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
பயன்படுத்தப்படாத CSS நீக்கி
பயன்படுத்தப்படாத CSS ரிமூவர், முக்கியமான CSS பிரித்தெடுத்தல் போன்ற அதே மென்பொருளைப் பயன்படுத்துகிறது மற்றும் UI செயல்கள் மூலம் Puppeteer போன்ற உலாவி கட்டுப்பாடு உட்பட கிட்டத்தட்ட அதே உள்ளமைவு விருப்பங்களை ஏற்றுக்கொள்கிறது. கருவி பயன்படுத்தப்படாத CSS ஐப் பிரித்தெடுக்கவும் உதவுகிறது.
எடுத்துக்காட்டு கட்டமைப்பைக் காட்டு
பயன்படுத்தப்படாத CSS நீக்கியின் எடுத்துக்காட்டு கட்டமைப்பு
{
"atRulesToKeep": [
"charset",
"keyframes",
"import",
"namespace",
"page"
],
"atRulesToRemove": [],
"selectorsToKeep": [
"*",
"*:before",
"*:after",
"html",
"body"
],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"pseudoSelectorsToKeep": [
"/:.*/"
],
"pseudoSelectorsToRemove": [],
"maxElementsToCheckPerSelector": false,
"strictParser": false,
"ui_actions": [
{
run: true
}
]
}
நகல் CSS ரிமூவர்
டூப்ளிகேட் CSS ரிமூவர் இரண்டு ஸ்டைல்ஷீட்களை ஒப்பிட்டு, நகல் CSSஐ அகற்ற அல்லது பிரித்தெடுக்க உதவுகிறது.
எடுத்துக்காட்டு கட்டமைப்பைக் காட்டு
நகல் CSS நீக்கியின் எடுத்துக்காட்டு கட்டமைப்பு
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
இரண்டாவது உள்ளீட்டு புலம் ஸ்டைல்ஷீட் குறியீட்டு எண்ணை ஏற்றுக்கொள்கிறது. அமைப்புகள் தாவலில் ஸ்டைல்ஷீட் மேலோட்டத்தில் ஸ்டைல்ஷீட்டின் குறியீட்டை நீங்கள் காணலாம்.
புதிய ஸ்டைல்ஷீட்டை உருவாக்குவதன் மூலம் வெளிப்புற URL(களில்) இருந்து ஸ்டைல்ஷீட்டைப் பதிவேற்றலாம் அல்லது ஸ்டைல்ஷீட்களை ஒப்பிடலாம். நீங்கள் URLகளை இறக்குமதி செய்யலாம் அல்லது ஸ்டைல்ஷீட்களைப் பதிவேற்றலாம் மற்றும் நகல் CSS ரிமூவரில் உள்ள புதிய ஸ்டைல்ஷீட்டிலிருந்து குறியீட்டைப் பயன்படுத்தலாம்.
கட்டமைத்தவுடன், நகல் CSS ரிமூவரைத் தொடங்க பொத்தானை அழுத்தவும். ஒரு CSS கருத்து அதன் விளைவாக குறைக்கப்பட்ட CSS இன் அடிப்படை புள்ளிவிவரங்களைக் காண்பிக்கும்.